/* ==========================================================================
   ZIMMERSOFTWARE PREMIUM DESIGN TEMPLATE (VARIANTE B)
   Hotel: Hotel am Kurpark
   Generiert für: hotel-am-kurpark (https://w43.zimmersoftware.de/hotel-am-kurpark)
   ========================================================================== */

/* --- 1. CSS-VARIABLEN & FARBEN --- */
:root {
  --zs-primary: #0f766e;
  --zs-primary-hover: #0d9488;
  --zs-primary-rgb: 15, 118, 110;
  --zs-dark: #134e4a;
  --zs-bg: #ffffff;
  --zs-card-bg: #ffffff;
  --zs-border: #e2e8f0;
  --zs-border-hover: #cbd5e1;
  --zs-radius: 14px;
  --zs-radius-sm: 8px;
  --zs-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.07), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  --zs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --zs-max-width: 1280px;
}

/* --- 2. GLOBALER RESET & TYPOGRAFIE --- */
html, body {
  font-family: var(--zs-font) !important;
  background-color: var(--zs-bg) !important;
  color: #1e293b !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Haupt-Container Zentrierung & Weite (Großzügige Desktop-Breite) */
#wrapper, 
#content, 
.container, 
.booking-container, 
#booking_step_form, 
form#form, 
form#form_booking,
.main-body-wrapper {
  max-width: var(--zs-max-width) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* --- 3. ZIMMERSOFTWARE HEADER HARMONISIERUNG --- */
header.be_header, .be_header, header.sticky, header.innerHeader.sticky, .head-navigaton, .cpny-header-information {
  display: none !important;
}

.be_header .head-navigaton {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  max-width: var(--zs-max-width) !important;
  margin: 0 auto !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Entferne den überhängenden ZS-Logo-Kasten */
header.be_header .logo, 
.head-navigaton .logo, 
.col-xl-3.logo, 
.logo,
.site-logo-box {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 54px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  position: static !important;
}

header.be_header .logo:before,
header.be_header .logo:after,
.head-navigaton .logo:before,
.head-navigaton .logo:after,
.logo:before,
.logo:after {
  display: none !important;
  content: none !important;
}

.be_header .logo .logo-name, .logo-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--zs-dark) !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  font-family: var(--zs-font) !important;
  line-height: 1.2 !important;
}

.cpny-header-information {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-left: auto !important;
  margin-right: 18px !important;
}

.cpny-phone-information a, .cpny-email-information a {
  color: #475569 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color 0.15s ease !important;
}

.cpny-phone-information a:hover, .cpny-email-information a:hover {
  color: var(--zs-primary) !important;
}

.globe_switcher {
  border: 1px solid #e2e8f0 !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  font-weight: 600 !important;
}

/* --- 4. HERO-BEREICH & DIREKTBUCHER-BANNER: ZERO-GAP OBEN AUF ALLEN STEPS (SPEZIELL STEP 10) --- */
.homeBanner,
.homeBanner.bannerBg,
.bannerBg {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
}

@supports(-webkit-overflow-scrolling: touch) {
  .bannerBg {
    min-height: 0 !important;
    max-height: none !important;
  }
}

.bannerBg::before,
.bannerBg::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
}

.bookRoom, 
.qrdes, 
.homeBanner .bookRoom,
.webbooking-overlay {
  margin: 0 auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  max-width: var(--zs-max-width) !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}

.bookRoom h2.text-center, 
.homeBanner h2, 
.homeBanner h1,
.webbooking-overlay h2,
.bookRoom h2 {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.s_10_container {
  margin: 0 auto !important;
  margin-top: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
}

.booking-fields-box {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Im iFrame auf der Hotel-Website: Maximal bündiger oberer Abschluss, doppelter Header-Banner ausgeblendet */
body.zs-in-iframe {
  overflow-x: hidden !important;
}
body.zs-in-iframe .zs-custom-header-banner {
  display: none !important;
}

/* Das Hero-Banner mit Hotelname & Vorteilen (nur Standalone außerhalb von iFrames) */
.zs-custom-header-banner {
  background: linear-gradient(135deg, var(--zs-primary) 0%, var(--zs-dark) 100%) !important;
  color: #ffffff !important;
  padding: 20px 22px 22px 22px !important;
  border-radius: var(--zs-radius) !important;
  margin: 0 auto 16px auto !important;
  max-width: var(--zs-max-width) !important;
  box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.16), 0 6px 14px -2px rgba(0, 0, 0, 0.08) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
}

.zs-custom-header-banner h1 {
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px 0 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.zs-custom-header-banner p {
  font-size: 15px !important;
  opacity: 0.95 !important;
  margin: 0 !important;
  color: #f1f5f9 !important;
}

/* Trust-Badges Banner */
.zs-trust-badges-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.zs-trust-badge-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  padding: 6px 16px !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  backdrop-filter: blur(4px) !important;
}

/* --- 5. BUCHUNGSMASKE (VOLL AUSGEFÜLLTE FELDER & WEITE ZEILE) --- */
.s_10_container, .booking-fields-box {
  width: 100% !important;
  max-width: var(--zs-max-width) !important;
  margin: 0 auto 30px auto !important;
  position: relative !important;
  z-index: 30 !important;
  box-sizing: border-box !important;
}

.booking-fields-box .row {
  margin: 0 !important;
  display: flex !important;
  width: 100% !important;
}

/* Leere ZS-Abstandsspalten (col-xl-4, col-xl-3) komplett ausblenden */
.booking-fields-box .col-xl-4,
.booking-fields-box .col-xl-3 {
  display: none !important;
}

.booking-fields-box .col-xl-8,
.booking-fields-box .col-xl-9 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
}

/* Das zentrale weiße Suchfeld: Vollständig ausgefüllt, keine verkleinerten Eingaben */
.inner-booking-fields-box {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  background: #ffffff !important;
  padding: 12px 16px !important;
  border-radius: var(--zs-radius) !important;
  box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.14), 0 6px 12px -2px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e2e8f0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Kalender-Container nutzt die gesamte verfügbare Breite */
.calender_box {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* tDatePicker: Volle 100% Breite mit zwei gleichmäßig großen Feldern */
.t-datepicker {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  box-shadow: none !important;
  position: relative !important;
}

/* Anreise & Abreise Container: Einziger sauberer Außenrahmen, uneingeschränkt 100% klickbar */
.t-check-in, .t-check-out {
  flex: 1 1 50% !important;
  width: 100% !important;
  min-width: 140px !important;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: var(--zs-radius-sm, 12px) !important;
  height: 52px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  position: static !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

.t-check-in:hover, .t-check-out:hover,
.t-check-in.target-cal, .t-check-out.target-cal,
.t-check-in:focus-within, .t-check-out:focus-within {
  border-color: var(--zs-primary) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(var(--zs-primary-rgb), 0.16) !important;
}

/* ALLE INNEREN ELEMENTE IM DATUMSFELD VOLLSTÄNDIG RAHMENLOS & 100% AUSGEFÜLLT */
html.t-datepicker-open .t-datepicker .target-cal > .t-dates,
html.t-datepicker-open .target-cal > .t-dates,
html body .t-datepicker .target-cal > .t-dates,
html body .t-datepicker .t-check-in > .t-dates,
html body .t-datepicker .t-check-out > .t-dates,
.t-datepicker-open .target-cal > .t-dates,
.t-datepicker-open .t-check-in > .t-dates,
.t-datepicker-open .t-check-out > .t-dates,
.target-cal > .t-dates,
.target-cal .t-dates,
.t-check-in > .t-dates,
.t-check-out > .t-dates,
.t-check-in *,
.t-check-out *,
.t-datepicker *,
.calender_box * {
  box-sizing: border-box !important;
}

.t-check-in > div,
.t-check-out > div,
.t-check-in .t-dates,
.t-check-out .t-dates,
.t-check-in label,
.t-check-out label,
.t-check-in span,
.t-check-out span,
.t-check-in input,
.t-check-out input,
.t-date-check-in,
.t-date-check-out,
.t-date-info-title,
.t-datepicker .t-input,
.t-input-check-in,
.t-input-check-out,
.t-dates label,
.t-dates span,
.t-dates div,
.t-dates input,
#arrive,
#depart,
input#arrive,
input#depart,
input[name="arrive"],
input[name="depart"],
input[name="anreise"],
input[name="abreise"],
input[name="from"],
input[name="to"],
input[name="checkin"],
input[name="checkout"],
.inner-booking-fields-box input,
.t-check-in input,
.t-check-out input,
.t-datepicker input,
.t-input,
.t-input-check-in,
.t-input-check-out,
.t-check-in input:focus,
.t-check-out input:focus,
.t-datepicker input:focus,
.t-input:focus,
.t-input-check-in:focus,
.t-input-check-out:focus,
.t-check-in .t-input,
.t-check-out .t-input,
.t-check-in .t-dates input,
.t-check-out .t-dates input {
  border: 0 none transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: 0 none transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* t-dates und innerer Text füllen den gesamten Kasten aus */
.t-check-in .t-dates,
.t-check-out .t-dates,
.t-date-check-in,
.t-date-check-out {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  gap: 8px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.t-check-in .t-dates label,
.t-check-out .t-dates label,
.t-date-info-title,
.t-input-check-in,
.t-input-check-out,
.t-check-in input,
.t-check-out input {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.t-datepicker i.fa,
.t-datepicker .fa-calendar,
.t-check-in .fa-calendar,
.t-check-out .fa-calendar,
.t-dates .fa-calendar,
.t-dates i {
  margin-right: 4px !important;
  color: #475569 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  display: inline-block !important;
}

/* --- KALENDER-POPUP (T-DATEPICKER, BOOTSTRAP-DATEPICKER, UI-DATEPICKER, DATERANGEPICKER) VOLLSTÄNDIG IM LUXUS-BRAND-DESIGN --- */
.t-datepicker-day,
.datepicker-dropdown,
.datepicker.dropdown-menu,
.bootstrap-datetimepicker-widget,
.ui-datepicker,
.daterangepicker,
.flatpickr-calendar {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 45px -4px rgba(0, 0, 0, 0.22), 0 8px 18px -2px rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  z-index: 999999 !important;
  padding: 16px !important;
  position: absolute !important;
  top: 56px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  font-family: var(--zs-font, inherit) !important;
}

/* Tabellen-Container im Kalender: Keine absolute Verschiebung */
.t-datepicker-day .t-table-wrap,
.t-table-wrap,
.datepicker table,
.ui-datepicker-calendar,
.daterangepicker .calendar-table table {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: auto !important;
  display: inline-table !important;
  margin: 0 6px !important;
  border-collapse: separate !important;
  border-spacing: 2px !important;
}

/* Monats-Navigation Pfeilbuttons (< und >) oben links und rechts */
/* t-check-out Kalender-Popup: Zu 100% am gemeinsamen .t-datepicker ausgerichtet, kein Abschneiden auf Abreise! */
.t-datepicker {
  position: relative !important;
}

.t-check-in,
.t-check-out {
  position: static !important;
}

.t-datepicker-day .t-table-wrap {
  position: relative !important;
}

.t-datepicker-day,
.t-check-in .t-datepicker-day,
.t-check-out .t-datepicker-day,
.t-check-out.target-cal .t-datepicker-day,
.t-datepicker .t-datepicker-day {
  left: 0 !important;
  right: auto !important;
  top: 56px !important;
  position: absolute !important;
  width: min(650px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
  z-index: 999999 !important;
}

/* 1. Standard Sprechblasen-Pfeile (t-arrow-top) restlos ausblenden */
.t-arrow-top,
.t-arrow-top:before,
.t-arrow-top:after,
.t-check-in .t-arrow-top,
.t-check-out .t-arrow-top,
.t-datepicker .t-arrow-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* 2. Echter Zurück-Pfeil (<): Links oben auf jedem Kalendermonat */
.t-datepicker-day th.t-prev,
.t-datepicker-day .t-prev,
.t-datepicker-day .t-arrow.t-prev,
.datepicker th.prev,
.ui-datepicker-prev,
.daterangepicker th.prev {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background-color: var(--zs-primary, #059669) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(var(--zs-primary-rgb, 5, 150, 105), 0.35) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  z-index: 99999 !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.t-datepicker-day th.t-prev::after {
  content: "‹" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 3. Echter Vorwärts-Pfeil (>): Rechts oben auf jedem Kalendermonat (Immer voll sichtbar!) */
.t-datepicker-day th.t-next,
.t-datepicker-day .t-next,
.t-datepicker-day .t-arrow.t-next,
.datepicker th.next,
.ui-datepicker-next,
.daterangepicker th.next {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background-color: var(--zs-primary, #059669) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(var(--zs-primary-rgb, 5, 150, 105), 0.35) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 99999 !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.t-datepicker-day th.t-next::after {
  content: "›" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* 4. Verhindern, dass deaktivierte oder überlagerte Pfeile hängen */
.t-datepicker-day .t-arrow.t-disabled,
.t-datepicker-day .t-arrow-top.t-disabled,
.t-datepicker-day th.t-prev.t-disabled,
.t-datepicker-day th.t-next.t-disabled,
.datepicker th.prev.disabled,
.datepicker th.next.disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* 4.1 Nicht wählbare Tage sauber ausgrauen (Vergangenheit oder vor Anreise bei Abreisewahl) */
.t-datepicker-day td.t-disabled,
.t-datepicker-day .t-disabled,
.t-datepicker-day td.t-disabled .t-day,
.t-datepicker-day .t-disabled .t-day,
.t-disabled {
  opacity: 0.3 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: transparent !important;
  background-color: transparent !important;
  text-decoration: line-through !important;
}

.t-datepicker-day .t-arrow-top:hover:not(.t-disabled),
.t-datepicker-day .t-arrow-bottom:hover:not(.t-disabled),
.t-datepicker-day .t-arrow-left:hover:not(.t-disabled),
.t-datepicker-day .t-arrow-right:hover:not(.t-disabled),
.datepicker th.prev:hover,
.datepicker th.next:hover,
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover,
.daterangepicker th.prev:hover,
.daterangepicker th.next:hover {
  background-color: var(--zs-primary-hover, #047857) !important;
  transform: scale(1.08) !important;
}

/* 5. Alle inneren grauen Standard-Pfeile (Spans, i, Icons, Borders) restlos entfernen */
.t-datepicker-day .t-arrow span,
.t-datepicker-day .t-arrow i,
.t-datepicker-day .t-arrow svg,
.t-datepicker-day .t-arrow-top *,
.t-datepicker-day .t-arrow-bottom *,
.t-datepicker-day .t-arrow-left *,
.t-datepicker-day .t-arrow-right *,
.t-datepicker-day .t-arrow-top:before,
.t-datepicker-day .t-arrow-top:after,
.t-datepicker-day .t-arrow-bottom:before,
.t-datepicker-day .t-arrow-bottom:after,
.t-datepicker-day .t-arrow-left:before,
.t-datepicker-day .t-arrow-left:after,
.t-datepicker-day .t-arrow-right:before,
.t-datepicker-day .t-arrow-right:after,
.t-arrow-top:before,
.t-arrow-bottom:before,
.t-arrow-left:before,
.t-arrow-right:before,
.datepicker th.prev *,
.datepicker th.next *,
.ui-datepicker-prev *,
.ui-datepicker-next *,
.daterangepicker th.prev *,
.daterangepicker th.next * {
  display: none !important;
  content: none !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Kalender Monats- & Jahres-Titel (z. B. "November 2026", "Dezember 2026") */
.t-datepicker-day .t-date-title,
.t-datepicker-day .t-month-title,
.t-date-title,
.t-month,
.t-year,
.ui-datepicker-title,
.datepicker-switch,
.datepicker th.datepicker-switch,
.daterangepicker th.month {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 8px 0 !important;
  text-align: center !important;
}

/* Wochentage (Mo, Di, Mi, Do, Fr, Sa, So) */
.t-datepicker-day .t-day-header,
.t-datepicker-day .t-day-header th,
.t-datepicker-day .t-table-wrap th,
.t-day-header th,
.t-day-header,
.datepicker th.dow,
.ui-datepicker-calendar th,
.daterangepicker th {
  color: #64748b !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding-bottom: 8px !important;
  text-align: center !important;
}

/* Kalendertage normal & hover */
.t-datepicker-day .t-day,
.t-day,
.datepicker td.day,
.ui-datepicker-calendar td a,
.daterangepicker td.available {
  border-radius: 8px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: center !important;
  padding: 6px 8px !important;
}

.t-datepicker-day .t-day:hover,
.t-day:hover,
.t-datepicker-day td:hover .t-day,
td:hover .t-day,
.datepicker td.day:hover,
.ui-datepicker-calendar td a:hover,
.daterangepicker td.available:hover {
  background: #ecfdf5 !important;
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  font-weight: 700 !important;
}

/* Ausgewählter Start- und End-Tag (z. B. Tag 14 und Tag 16): Overpower ALL themes */
html body div.t-datepicker td.t-start,
html body div.t-datepicker td.t-end,
html body div.t-datepicker td.t-start *,
html body div.t-datepicker td.t-end *,
html body div.t-datepicker td.t-start .t-day,
html body div.t-datepicker td.t-end .t-day,
html body div.t-datepicker .t-start,
html body div.t-datepicker .t-end,
html body div.t-datepicker .t-start .t-day,
html body div.t-datepicker .t-end .t-day,
html body div.t-datepicker .t-datepicker-day table.t-table-wrap td.t-start,
html body div.t-datepicker .t-datepicker-day table.t-table-wrap td.t-end,
html body div.t-datepicker .t-datepicker-day table.t-table-wrap td.t-start .t-day,
html body div.t-datepicker .t-datepicker-day table.t-table-wrap td.t-end .t-day,
html body div.t-datepicker .t-datepicker-day table.t-table-wrap td.t-start *,
html body div.t-datepicker .t-datepicker-day table.t-table-wrap td.t-end *,
html body div.t-datepicker td.t-start,
html body div.t-datepicker td.t-end,
html body div.t-datepicker td.t-start .t-day,
html body div.t-datepicker td.t-end .t-day,
html body td.t-start,
html body td.t-end,
html body td.t-start *,
html body td.t-end *,
html body td.t-start .t-day,
html body td.t-end .t-day,
.t-datepicker-day .t-start,
.t-datepicker-day .t-end,
.t-datepicker-day .t-start .t-day,
.t-datepicker-day .t-end .t-day,
.t-datepicker-day td.t-start,
.t-datepicker-day td.t-end,
.t-datepicker-day td.t-start .t-day,
.t-datepicker-day td.t-end .t-day,
.t-datepicker-day td.t-start *,
.t-datepicker-day td.t-end *,
.t-datepicker-day .t-table-wrap td.t-start,
.t-datepicker-day .t-table-wrap td.t-end,
.t-datepicker-day .t-table-wrap td.t-start *,
.t-datepicker-day .t-table-wrap td.t-end *,
.t-start,
.t-end,
.t-start .t-day,
.t-end .t-day,
td.t-start,
td.t-end,
td.t-start *,
td.t-end *,
td.t-start .t-day,
td.t-end .t-day,
.t-day.t-start,
.t-day.t-end,
.t-hover-day,
.t-hover-day .t-day,
.t-active,
.t-selected,
td.active,
td.start-date,
td.end-date,
.datepicker td.active,
.datepicker td.selected,
.ui-state-active,
.ui-datepicker-calendar td.ui-datepicker-current-day a,
.daterangepicker td.active,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
  background: var(--zs-primary, #059669) !important;
  background-color: var(--zs-primary, #059669) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(var(--zs-primary-rgb, 5, 150, 105), 0.35) !important;
}

/* Bereich zwischen Anreise und Abreise (z. B. Tage 5 und 6) */
.t-datepicker-day .t-range,
.t-datepicker-day .t-range .t-day,
.t-datepicker-day td.t-range,
.t-datepicker-day td.t-range .t-day,
.t-datepicker-day .t-table-wrap td.t-range,
.t-range,
.t-range .t-day,
td.t-range,
td.t-range .t-day,
td.in-range,
.t-range-limit,
.datepicker td.range,
.daterangepicker td.in-range {
  background: #ecfdf5 !important;
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
}

/* Altsystem-Akkordeon & "Mehr anzeigen"-Links in Brand-Farben stylen bzw. aufräumen */
.more-details,
.view_more,
.collapse_btn,
a.accordion-button,
.room-detail-accordion .accordion-header a,
.room-detail-accordion .summary a,
a.more-details,
a.more-info {
  color: var(--zs-primary, #059669) !important;
  font-weight: 700 !important;
}

/* Kalender-Tage (Zellen) müssen immer stabil als Tabellenzellen sichtbar bleiben (verhindert Zittern & Verschieben) */
.t-datepicker-day td,
.t-datepicker-day td.t-day,
.t-datepicker-day td.t-hover-day,
.t-datepicker-day .t-day {
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Nächte-Tooltip ("1 Nacht") und Pfeile im Kalender sauber ausblenden */
.t-hover-day-content,
.t-hover-day::after,
.t-hover-day::before,
.nightCountSec,
.nightCount,
.nightCounter,
.t-range-title,
.t-date-info-title,
.t-date-range-title,
.zs-nights-counter-pill,
#zs-live-nights-pill {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
  content: "" !important;
}

/* Personen-Auswahl: Äußerer Kasten ohne Doppelrahmen */
.filter_control-outer.filter_control-person {
  flex: 0 0 auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

/* Standard ZS User-Icon Pseudoelement sauber entfernen */
.filter_control-outer.filter_control-person:before,
.icon-person-field-outer:before {
  display: none !important;
  content: none !important;
}

/* Nur das innere Span erhält den schicken Rahmen */
.filter_control-outer.filter_control-person span,
.filter_control-outer.filter_control-person .travelCount {
  border: 1.5px solid #cbd5e1 !important;
  background: #f8fafc !important;
  border-radius: var(--zs-radius-sm) !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.filter_control-outer.filter_control-person:hover span,
.filter_control-outer.filter_control-person:hover .travelCount {
  border-color: var(--zs-primary) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(var(--zs-primary-rgb), 0.16) !important;
}

/* Eventuelle innere Spans komplett entstilisieren */
.filter_control-outer.filter_control-person span span,
.filter_control-outer.filter_control-person .travelCount span {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* ==========================================================================
   PERSONEN-AUSWAHL DROPDOWN-POPUP & "WEITER"-BUTTON VOLLSTÄNDIG IM BRAND-DESIGN
   ========================================================================== */
.filter_control-outer.filter_control-person .dropdown-menu,
.filter_control-person .dropdown-menu,
.filter_control-outer .dropdown-menu,
.travelCount_popup,
.travelCount-dropdown,
.person_popup,
.person-popup,
.person_dropdown,
.persons_dropdown,
div[class*="person_popup"],
div[class*="person-popup"],
div[class*="person_dropdown"],
div[id*="person_popup"],
div[id*="travelCount"],
.popover.person_popup,
.popover.travelCount {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 45px -4px rgba(0, 0, 0, 0.22), 0 8px 18px -2px rgba(0, 0, 0, 0.08) !important;
  padding: 18px !important;
  min-width: 290px !important;
  z-index: 999999 !important;
  box-sizing: border-box !important;
}

/* Redundante ZS-Kategorie "Privatpersonen (18+)" aus dem Dropdown komplett ausblenden */
.filter_control-person .dropdown-menu .form-group:nth-child(2),
.filter_control-person .dropdown-menu tr:nth-child(2),
.filter_control-person [data-category*="privat"],
.filter_control-person [data-category*="Privat"],
div[class*="person_popup"] .form-group:nth-child(2),
div[class*="person_popup"] tr:nth-child(2) {
  /* Wird zusätzlich per JS exakt nach Textinhalt 'Privatpersonen' ausgeblendet */
}

/* Personen-Auswahl auf maximal 2 Personen limitieren */
.filter_control-person select option:nth-child(n+3),
.filter_control-person .dropdown-menu select option:nth-child(n+3),
.filter_control-person select option[value="3"],
.filter_control-person select option[value="4"],
.filter_control-person select option[value="5"],
.filter_control-person select option[value="6"],
.filter_control-person select option[value="7"],
.filter_control-person select option[value="8"],
.dropdown-menu select option[value="3"],
.dropdown-menu select option[value="4"],
.dropdown-menu select option[value="5"],
.person_popup select option[value="3"],
.person_popup select option[value="4"],
.person_popup select option[value="5"],
.travelCount_popup select option[value="3"],
.travelCount_popup select option[value="4"],
.travelCount_popup select option[value="5"] {
  display: none !important;
}

/* Formular-Elemente & Selects im Personen-Popup */
.filter_control-person select,
.filter_control-person .dropdown-menu select,
.filter_control-outer.filter_control-person select,
.person_popup select,
.person_dropdown select,
.travelCount_popup select {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background-color: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 6px 12px !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

.filter_control-person select:focus,
.filter_control-person .dropdown-menu select:focus,
.person_popup select:focus {
  border-color: var(--zs-primary, #059669) !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(var(--zs-primary-rgb, 5, 150, 105), 0.16) !important;
}

/* "Weiter"-Button / Fußleiste im Personen-Popup: Braune Farbe (z. B. #6e4e2a) vollständig eliminieren */
.filter_control-outer.filter_control-person .dropdown-menu button,
.filter_control-outer.filter_control-person .dropdown-menu a,
.filter_control-outer.filter_control-person .dropdown-menu .btn,
.filter_control-outer.filter_control-person .dropdown-menu div[class*="btn"],
.filter_control-outer.filter_control-person .dropdown-menu input[type="button"],
.filter_control-outer.filter_control-person .dropdown-menu input[type="submit"],
.filter_control-person .dropdown-menu button,
.filter_control-person .dropdown-menu a,
.filter_control-person .dropdown-menu .btn,
.filter_control-person .dropdown-menu div[class*="btn"],
.filter_control-person .dropdown-menu .btn-primary,
.filter_control-person .dropdown-menu input[type="button"],
.filter_control-person .dropdown-menu input[type="submit"],
.filter_control-person button,
.filter_control-person a.btn,
.filter_control-person .btn,
.filter_control-person .btn-primary,
.filter_control-person input[type="button"],
.filter_control-person input[type="submit"],
.person_popup button,
.person_popup a,
.person_popup .btn,
.person_popup .btn-primary,
.person_popup input[type="button"],
.person_popup input[type="submit"],
.person_dropdown button,
.person_dropdown a,
.person_dropdown .btn,
.person_dropdown .btn-primary,
.travelCount_popup button,
.travelCount_popup a,
.travelCount_popup .btn,
.travelCount_dropdown button,
.travelCount_dropdown a,
.travelCount_dropdown .btn,
div[class*="person"] button,
div[class*="person"] a.btn,
div[class*="person"] .btn,
button.btn_weiter,
button.btn-weiter,
button.btn-next,
a.btn_weiter,
a.btn-weiter,
a.btn-next,
.btn-next,
.btn_weiter {
  background: var(--zs-primary, #059669) !important;
  background-color: var(--zs-primary, #059669) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--zs-radius-sm, 10px) !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(var(--zs-primary-rgb, 5, 150, 105), 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
  text-decoration: none !important;
  margin-top: 14px !important;
  box-sizing: border-box !important;
}

.filter_control-outer.filter_control-person .dropdown-menu button:hover,
.filter_control-outer.filter_control-person .dropdown-menu a:hover,
.filter_control-person .dropdown-menu button:hover,
.filter_control-person .dropdown-menu a:hover,
.filter_control-person .btn:hover,
.person_popup button:hover,
.person_popup a:hover,
.person_popup .btn:hover,
.person_dropdown button:hover,
.person_dropdown a:hover,
.travelCount_popup button:hover,
.travelCount_popup a:hover,
div[class*="person"] button:hover,
div[class*="person"] a:hover,
button.btn_weiter:hover,
button.btn-weiter:hover,
button.btn-next:hover,
a.btn_weiter:hover,
a.btn-weiter:hover {
  background: var(--zs-primary-hover, #047857) !important;
  background-color: var(--zs-primary-hover, #047857) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(var(--zs-primary-rgb, 5, 150, 105), 0.45) !important;
}

/* Suchen & Absenden Buttons */
.filter_control-outer {
  flex: 0 0 auto !important;
  display: block !important;
  margin: 0 !important;
}

.booking-fields-box input.submitBtn,
.filter_control-outer .submitBtn,
input.submitBtn, 
button.submitBtn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: var(--zs-primary) !important;
  color: #ffffff !important;
  border: none !important;
  height: 52px !important;
  padding: 0 28px !important;
  border-radius: var(--zs-radius-sm) !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(var(--zs-primary-rgb), 0.38) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
}

.booking-fields-box input.submitBtn:hover,
.filter_control-outer .submitBtn:hover,
input.submitBtn:hover {
  background: var(--zs-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(var(--zs-primary-rgb), 0.48) !important;
}

.booking-fields-box .filter_control-outer[style*="display:none"],
.booking-fields-box .filter_control-outer[style*="display: none"] {
  display: block !important;
}
.booking-fields-box input.submitBtn[hidden] {
  display: inline-flex !important;
  visibility: visible !important;
}

/* --- 6. HÄSSLICHE STANDARD-PLATZHALTER & ROH-TEXTE ENTFERNEN --- */
.be_text_suche,
.bookDtlsArea.full.m-t-15.m-b-15,
.bookDtlsArea.full.m-t-15:not(.left-side-box):not(.sameHeight),
.fillDetails .col-md-12:has(.bookDtlsArea.full.m-t-15),
.col-md-12:has(.bookDtlsArea.full.m-t-15) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* --- 7. ZIMMERKARTEN KOMPAKT & HORIZONTAL (1:1 WIE IN BILD 12) --- */
.booking-wrapper {
  max-width: var(--zs-max-width) !important;
  width: 100% !important;
  margin: 24px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Zimmerkarte: Kompakter, flacher Kasten mit abgerundeten Ecken */
/* Eleganter, kompakter Hinweis wenn ein Zeitraum ausgebucht ist */
.zs-soldout-box,
h3.zs-soldout-box,
.col-xl-12 > h3,
.col-md-12 > h3 {
  background: #fffbeb !important;
  border: 1px solid #fef08a !important;
  border-radius: 12px !important;
  padding: 16px 24px !important;
  margin: 22px auto 28px auto !important;
  max-width: 820px !important;
  text-align: center !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}

.zs-soldout-box,
.zs-soldout-box *,
.zs-soldout-box strong,
.col-xl-12 > h3,
.col-xl-12 > h3 * {
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-family: inherit !important;
}

.zs-soldout-title {
  display: block !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #92400e !important;
  margin-bottom: 4px !important;
}

.zs-soldout-sub {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #a16207 !important;
}

.zs-soldout-phone {
  color: var(--zs-primary, #0f766e) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  white-space: nowrap !important;
}

.room-info-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.room-info-box:hover {
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.1) !important;
  border-color: #cbd5e1 !important;
}

/* Horizontales Flex-Layout zwingend auf Desktop - Oben bündig mit Foto */
.room-info-box .row,
.booking-wrapper .room-info-box .row,
.main-body-wrapper .room-info-box .row,
div.room-info-box > .row,
div.room-info-box .row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

/* Linke Bildspalte: Genau 1 einziges Hauptfoto (220 x 160 px), keine Thumbnail-Leiste */
.room-info-box .col-xl-5,
.room-info-box .col-lg-5,
.room-info-box .col-md-5,
.room-info-box .col-sm-5,
.booking-wrapper .room-info-box .col-xl-5,
.booking-wrapper .room-info-box .col-lg-5,
.booking-wrapper .room-info-box .col-md-5,
.main-body-wrapper .room-info-box .col-xl-5,
.main-body-wrapper .room-info-box .col-lg-5,
.main-body-wrapper .room-info-box .col-md-5,
.room-info-box .zs-hero-image-wrapper {
  flex: 0 0 220px !important;
  max-width: 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #f1f5f9 !important;
  display: block !important;
}

/* Bulletproof Bild-Frame (garantiert 100% sichtbares Bild) */
.zs-room-image-frame,
.room-info-box .zs-room-image-frame {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  z-index: 2 !important;
  background: #f1f5f9 !important;
  display: block !important;
}

.zs-room-hero-img,
.room-info-box .zs-room-hero-img,
.room-info-box .col-xl-5 img,
.room-info-box .col-lg-5 img,
.room-info-box .col-md-5 img,
.room-info-box .col-sm-5 img,
.room-info-box img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 12px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.3s ease !important;
}

.room-info-box:hover .zs-room-hero-img {
  transform: scale(1.04) !important;
}

/* Fragile Slider-Container ausblenden, da zs-room-image-frame das saubere Bild darstellt */
.room-info-box .col-xl-5 .lSGallery,
.room-info-box .col-xl-5 .lSPager,
.room-info-box .col-xl-5 .lSPrev,
.room-info-box .col-xl-5 .lSNext,
.room-info-box .col-xl-5 .lSAction,
.room-info-box ul.lSGallery {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Rechte Inhalts-Spalte (Beschreibung & Preis): Oben exakt bündig mit der Oberkante des Fotos */
.room-info-box .col-xl-7,
.room-info-box .col-lg-7,
.room-info-box .col-md-7,
.room-info-box .col-sm-7,
.room-info-box .col-md-8,
.room-info-box .col-lg-8,
.room-info-box .col-xl-8,
.booking-wrapper .room-info-box .col-xl-7,
.booking-wrapper .room-info-box .col-lg-7,
.booking-wrapper .room-info-box .col-md-7,
.booking-wrapper .room-info-box .col-md-8,
.main-body-wrapper .room-info-box .col-xl-7,
.main-body-wrapper .room-info-box .col-lg-7,
.main-body-wrapper .room-info-box .col-md-7,
.main-body-wrapper .room-info-box .col-md-8,
div.room-info-box .col-xl-7,
div.room-info-box .col-md-8 {
  flex: 1 1 calc(100% - 240px) !important;
  max-width: calc(100% - 240px) !important;
  width: calc(100% - 240px) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.room-detail-box {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  height: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
}

/* Kopfzeile der Karte: Titel links, Preis rechts – exakt auf Oberkante des Fotos */
.zs-card-header-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-top: -3px !important; /* Gleicht die Zeilenhöhe optisch perfekt an die Foto-Oberkante an */
}

.zs-card-title-col {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zs-card-title-col h4,
.room-detail-box h4,
.room-info-box h4,
.room-detail-box .zs-card-header-row h4 {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
}

/* Preis oben rechts: Zeigt den Gesamtpreis für alle Nächte groß und den Nächte-Hinweis darunter */
.zs-card-price-col {
  flex: 0 0 auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-top: -3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

@media (min-width: 769px) {
  .zs-card-price-col .zs-price-from,
  .zs-price-from {
    display: none !important;
  }
}

.zs-card-price-col .zs-price-amount {
  font-size: 21px !important;
  font-weight: 900 !important;
  color: var(--zs-primary) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zs-card-price-col .zs-price-subtext,
.zs-card-price-col .zs-price-unit {
  font-size: 11px !important;
  color: #475569 !important;
  font-weight: 700 !important;
  margin-top: 1px !important;
  display: block !important;
}

.zs-card-price-col .zs-price-total {
  font-size: 10.5px !important;
  color: #334155 !important;
  font-weight: 700 !important;
  margin-top: 3px !important;
  display: inline-block !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 1.5px 6px !important;
  border-radius: 6px !important;
  line-height: 1.25 !important;
}

.room-detail-list,
.room-detail-box > .room-detail-list,
.room-detail-box hr,
.room-info-box hr {
  display: none !important; /* Roh-Icon ausblenden */
}

/* Zimmersoftwares rohe Tabellen in schicke Ausstattungs-Badges umwandeln */
.roomDesc hr {
  display: none !important;
}

.roomDesc table {
  border: none !important;
  margin: 4px 0 !important;
  width: 100% !important;
}

.roomDesc table tbody {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.roomDesc table tr {
  display: contents !important;
}

/* Ausstattungs-Badges (Sowohl für Auto-Parser als auch HTML-Code - Maximal 3 nebeneinander) */
.zs-badges-container,
.zs-amenities-wrap,
.roomDesc .zs-badges-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px 8px !important;
  margin: 6px 0 10px 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.zs-badges-inline,
.roomDesc .zs-badges-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 8px !important;
  margin: 6px 0 10px 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

@media (max-width: 640px) {
  .zs-badges-container,
  .zs-amenities-wrap,
  .roomDesc .zs-badges-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.roomDesc table td,
.zs-amenity-badge,
.zs-badge,
.zs-amenity-pill {
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  border: 1.5px solid #e2e8f0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.roomDesc table td:hover,
.zs-amenity-badge:hover,
.zs-badge:hover,
.zs-amenity-pill:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Moderne monochrome SVG-Icons in Badges */
.zs-icon,
svg.zs-icon {
  width: 13.5px !important;
  height: 13.5px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  flex-shrink: 0 !important;
  color: #475569 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transition: color 0.15s ease !important;
}

.zs-badge:hover .zs-icon,
.zs-amenity-badge:hover .zs-icon,
.roomDesc table td:hover .zs-icon {
  color: var(--zs-primary) !important;
}

.zs-room-text {
  color: #64748b !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  margin: 4px 0 0 0 !important;
}

/* Beschreibungstext: Auf maximal 2 Zeilen begrenzen (wie in Bild 12) */
.roomDesc p {
  color: #64748b !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  margin: 3px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.roomDesc p:nth-of-type(n+3),
.roomDesc p br {
  display: none !important;
}

/* Fußzeile der Karte: Nächte-Info links, Button rechts ganz unten */
.zs-card-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid #f1f5f9 !important;
  width: 100% !important;
}

.zs-card-nights-info {
  font-size: 12px !important;
  color: #64748b !important;
}

.zs-card-nights-info strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Einheitliche Button-Breite & kompakte Höhe für perfekte visuelle Harmonie */
.zs-card-cta-btn {
  background: var(--zs-primary) !important;
  color: #ffffff !important;
  border: none !important;
  height: 38px !important;
  min-height: 38px !important;
  line-height: 38px !important;
  padding: 0 12px !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(var(--zs-primary-rgb), 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.zs-card-cta-btn:hover {
  background: var(--zs-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(var(--zs-primary-rgb), 0.45) !important;
}

/* Bestpreis Badge auf Bild */
.zs-bestprice-pill {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background-color: var(--zs-primary) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Ratenplan-Auswahl (mit/ohne Frühstück) direkt unter der Zimmerkarte - Sanftes Ausrollen ohne Scrollbalken */
.room-detail-accordion {
  display: none;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-top: none !important;
  border-radius: 0 0 16px 16px !important;
  padding: 18px 24px 22px 24px !important;
  margin-top: -24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.08) !important;
  position: relative !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.room-detail-accordion.zs-show-rates,
.room-info-box.zs-open-card + .room-detail-accordion {
  display: block !important;
  animation: zsRollout 0.28s ease-out !important;
}

.room-info-box.zs-open-card {
  border-radius: 16px 16px 0 0 !important;
  border-bottom: 1px dashed #cbd5e1 !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05) !important;
}

@keyframes zsRollout {
  from { 
    opacity: 0; 
    transform: translateY(-6px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}

@keyframes zs-spin {
  to { 
    transform: rotate(360deg); 
  }
}

/* Veraltete Zwischen-Kopfzeile und Pfeil-Toggle ausblenden, aber accordion-item und Inhalt sichtbar lassen */
.room-detail-accordion .accordion-header,
.room-detail-accordion h2.rate_plan,
.room-detail-accordion h2#headingOne,
.room-detail-accordion .accordion-button {
  display: none !important;
}

.room-detail-accordion .accordion-item,
.room-detail-accordion .room-detail-accordion-item {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Innere Collapse-Elemente sofort VOLL öffnen, damit kein zweiter Klick nötig ist */
.room-detail-accordion .accordion-collapse,
.room-detail-accordion .collapse,
.room-detail-accordion #collapseOne,
.room-detail-accordion .room-detail-accordion-body,
.room-detail-accordion .ratestable {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.zs-rates-section-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Native Preisanzeige (.summary, .price) als schöner, leuchtender Preis-Badge formatieren */
.summary, 
.room-info-box .summary,
.room-detail-box .summary {
  display: inline-block !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  color: var(--zs-primary, #059669) !important;
  letter-spacing: -0.02em !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
}

/* Rateplan Tabelle & Ratenkarten - Dezent, modern und elegant */
.ratestable {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.rate_plan {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  margin: 0 !important;
  gap: 12px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.rate_plan:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.rate_plan.zs-rate-breakfast {
  border: 1px solid #a7f3d0 !important;
  background: #fbfdfc !important;
}

.rate_plan.zs-rate-breakfast:hover {
  border-color: #10b981 !important;
  background: #f0fdf4 !important;
}

.rate_plan.zs-rate-nobreakfast {
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

.rate_name {
  font-weight: normal !important;
  font-size: 13px !important;
  color: #0f172a !important;
  flex: 1 1 auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zs-rate-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.zs-rate-heading-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.zs-rate-meal-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
}

.zs-rate-person-sub {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

.zs-rate-badge-empfohlen {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #065f46 !important;
  background: #ecfdf5 !important;
  border: 1px solid #d1fae5 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.zs-rate-badge-roomonly {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.zs-rate-storno-row,
.rate_plan small,
.rate_plan .cancellation_info,
.rate_plan .cancel_info,
.rate_plan .rate_desc {
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 450 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.35 !important;
  margin-top: 1px !important;
}

.zs-storno-check {
  color: #10b981 !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  flex-shrink: 0 !important;
}

/* "i" Info-Icons bei Preisen und Tarifen komplett ausblenden */
.rate_plan i,
.rate_plan .fa-info-circle,
.rate_plan .fa-info,
.rate_plan .fa-circle-info,
.rate_plan a[title*="info" i],
.rate_plan a[data-toggle="popover"],
.rate_plan a[data-bs-toggle="popover"],
.rate_plan .rate_info,
.rate_plan .info-icon,
.rate_plan .popover-icon,
.ratestable i,
.ratestable .fa-info-circle,
.ratestable .fa-info,
.ratestable .fa-circle-info,
.ratestable a[data-toggle="popover"],
.finalr i,
.finalr .fa-info-circle,
.finalr .fa-info,
.price i,
.price .fa-info-circle,
.price .fa-info,
.price-info,
.price_info,
.price-info i,
.price_info i,
.room-detail-accordion .fa-info-circle,
.room-detail-accordion .fa-info,
.room-detail-accordion i.fa-info-circle,
.room-detail-accordion i.fa-info {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.finalr {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}

.rateplan_submitBtn,
.rate_plan button,
.rate_plan input[type="submit"],
.rate_plan a.btn,
.rate_plan input.rateplan_submitBtn {
  background: var(--zs-primary) !important;
  color: #ffffff !important;
  border: none !important;
  height: 38px !important;
  min-height: 38px !important;
  line-height: 38px !important;
  padding: 0 12px !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(var(--zs-primary-rgb), 0.35) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

.rateplan_submitBtn:hover,
.rate_plan button:hover,
.rate_plan input[type="submit"]:hover,
.rate_plan a.btn:hover {
  background: var(--zs-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(var(--zs-primary-rgb), 0.45) !important;
}

@media (max-width: 600px) {
  .zs-card-cta-btn,
  .rateplan_submitBtn,
  .rate_plan button,
  .rate_plan input[type="submit"],
  .rate_plan a.btn {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- 7.5 ZUBUCHBARE OPTIONEN & EXTRAS (ADD-ONS) --- */
.zs-addons-section {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 12px 0 14px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.zs-addons-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.zs-addons-section-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
}

.zs-addons-grid,
.zs-addon-groups-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Akkordeon-Gruppen für Zusatzartikel */
.zs-addon-group {
  background: #eef2f6 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}

.zs-addon-group:hover {
  border-color: #94a3b8 !important;
}

.zs-addon-group.zs-group-has-selected {
  border-color: var(--zs-primary) !important;
  box-shadow: 0 2px 10px rgba(var(--zs-primary-rgb), 0.12) !important;
}

.zs-addon-group-header {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: #eef2f6 !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-align: left !important;
  transition: background 0.15s ease !important;
  user-select: none !important;
}

.zs-addon-group-header:hover {
  background: #e2e8f0 !important;
}

.zs-addon-group.zs-group-open .zs-addon-group-header {
  border-bottom: 1.5px solid #cbd5e1 !important;
  background: #e2e8f0 !important;
}

.zs-group-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.zs-group-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  letter-spacing: -0.01em !important;
}

.zs-group-count {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}

.zs-group-selected-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #15803d !important;
  background: #dcfce7 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  border: 1px solid #bbf7d0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.zs-group-chevron {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  transition: transform 0.25s ease !important;
}

.zs-addon-group.zs-group-open .zs-group-chevron {
  transform: rotate(180deg) !important;
  color: var(--zs-primary) !important;
}

.zs-addon-group-body {
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: #ffffff !important;
}

.zs-addon-group:not(.zs-group-open) .zs-addon-group-body {
  display: none !important;
}

.zs-addon-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

.zs-addon-card:hover {
  border-color: var(--zs-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-1px) !important;
}

.zs-addon-card.zs-addon-selected {
  border-color: var(--zs-primary) !important;
  background: #f0fdf4 !important;
  box-shadow: 0 2px 8px rgba(var(--zs-primary-rgb), 0.15) !important;
}

.zs-addon-checkbox-box {
  margin-top: 2px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border-radius: 6px !important;
  border: 1.5px solid #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #ffffff !important;
  color: transparent !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.zs-addon-checkbox-box::after {
  content: "" !important;
  display: none !important;
}

.zs-addon-card:hover .zs-addon-checkbox-box {
  border-color: var(--zs-primary) !important;
}

.zs-addon-card.zs-addon-selected .zs-addon-checkbox-box,
.zs-addon-checkbox-box.zs-checked {
  background: var(--zs-primary, #059669) !important;
  background-color: var(--zs-primary, #059669) !important;
  border-color: var(--zs-primary, #059669) !important;
  box-shadow: 0 1px 4px rgba(var(--zs-primary-rgb, 5, 150, 105), 0.3) !important;
}

.zs-addon-card.zs-addon-selected .zs-addon-checkbox-box::after,
.zs-addon-checkbox-box.zs-checked::after {
  content: "✓" !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Storno-Kreuz nur anzeigen, wenn der Artikel tatsächlich ausgewählt ist */
.zs-addon-card:not(.zs-addon-selected) .zs-card-cancel-cross {
  display: none !important;
}

.zs-addon-card.zs-addon-selected .zs-card-cancel-cross {
  display: inline-flex !important;
}

.zs-addon-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.zs-addon-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: block !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
}

.zs-addon-desc {
  font-size: 11px !important;
  color: #64748b !important;
  line-height: 1.35 !important;
}

.zs-addon-unit-tag {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}

/* Rechte Spalte: Kreuz oben, Preis darunter */
.zs-addon-right-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  text-align: right !important;
  min-height: 42px !important;
}

.zs-addon-right-col .zs-card-cancel-cross {
  align-self: flex-end !important;
  margin: 0 0 6px 0 !important;
}

.zs-addon-right-col .zs-addon-price,
.zs-addon-price {
  margin-top: auto !important;
  align-self: flex-end !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  color: var(--zs-primary) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* --- 8. ZIMMERSOFTWARE UNTERER TEXT (.blurb9) SAUBER FORMATIERT --- */
.blurb9 {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin-top: 16px !important;
  text-align: left !important;
}

.blurb9 br + br {
  display: none !important;
}

.blurb9 center {
  text-align: left !important;
}

/* --- 8.5 SCHRITT 25 (EXTRAS) & SCHRITT 30 (GASTDATEN): 2-SPALTEN-LAYOUT & FORMULAR-DESIGN --- */
.fillDetails > .container,
section.fillDetails > .container,
.fillDetails .container,
.customer-details .container,
.customer_details .container,
.main-body-wrapper > .container,
.main-body-wrapper .container,
form#form > .container,
form#form_booking > .container,
form#form .container,
.container {
  display: block !important;
  width: 100% !important;
  max-width: var(--zs-max-width, 1280px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* 2-Spalten-Flexbox-Zeile (Linke Seite: Extras/Formular, Rechte Seite: Buchungsübersicht) */
/* Ausschließlich auf Schritt 25 & 30 anwenden, niemals auf Zimmerkarten! */
.fillDetails:not(:has(.room-info-box)) > .container > .row,
.fillDetails:not(:has(.room-info-box)) > .row,
section.fillDetails:not(:has(.room-info-box)) > .container > .row,
.customer-details > .row,
.customer_details > .row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.fillDetails .row:after,
.customer-details .row:after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* Verhindern, dass versteckte Inputs im Flex-Container Platz einnehmen */
input[type="hidden"],
input[hidden],
[hidden] {
  display: none !important;
}

/* Linkes Formular für Gastdaten & Extras füllt den gesamten verfügbaren linken Platz aus (NUR AUF DESKTOP ab 992px) */
@media (min-width: 992px) {
  .fillDetails:not(:has(.room-info-box)) .col-md-8:not(.room-info-box *):not(.formArea *),
  .fillDetails > .container > .row > .col-md-8:not(.room-info-box *),
  .customer-details > .row > .col-md-8:not(.room-info-box *),
  .customer-details .col-md-8:not(.room-info-box *):not(.formArea *),
  .customer_details .col-md-8:not(.room-info-box *):not(.formArea *) {
    flex: 1 1 calc(100% - 378px) !important;
    width: calc(100% - 378px) !important;
    max-width: calc(100% - 378px) !important;
    min-width: 300px !important;
    float: left !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: var(--zs-radius, 16px) !important;
    padding: 28px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 24px !important;
  }
}

/* Rechte Spalte: Buchungsübersicht (NUR auf Desktop ab 992px als rechte Sidebar mit 350px Breite) */
@media (min-width: 992px) {
  .fillDetails:not(:has(.room-info-box)) .col-md-4:not(.room-info-box *),
  .fillDetails > .container > .row > .col-md-4:not(.room-info-box *),
  .customer-details > .row > .col-md-4:not(.room-info-box *),
  .customer-details .col-md-4:not(.room-info-box *),
  .customer_details .col-md-4:not(.room-info-box *) {
    flex: 0 0 350px !important;
    width: 350px !important;
    min-width: 320px !important;
    max-width: 350px !important;
    float: right !important;
    box-sizing: border-box !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 991px) {
  .fillDetails .row:has(.col-md-8),
  .customer-details .row:has(.col-md-8),
  .customer_details .row:has(.col-md-8),
  .main-body-wrapper .row:has(.col-md-8),
  form#form .row:has(.col-md-8),
  .container > .row:has(.col-md-8),
  .row:has(> .col-md-8):has(> .col-md-4),
  .fillDetails > .container > .row,
  .main-body-wrapper > .container > .row,
  section.fillDetails > .container > .row,
  form#form > .container > .row,
  form#form_booking > .container > .row,
  .fillDetails .container > .row,
  .main-body-wrapper .container > .row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
  }

  .col-md-8,
  .fillDetails .col-md-8,
  .customer-details .col-md-8,
  .customer_details .col-md-8,
  .main-body-wrapper .col-md-8,
  .col-md-4,
  .fillDetails .col-md-4,
  .fillDetails:not(:has(.room-info-box)) .col-md-4,
  .fillDetails:not(:has(.room-info-box)) .col-md-4:not(.room-info-box *),
  .fillDetails > .container > .row > .col-md-4,
  .fillDetails > .container > .col-md-4,
  .customer-details .col-md-4,
  .customer-details > .row > .col-md-4,
  .customer-details .col-md-4:not(.room-info-box *),
  .customer_details .col-md-4:not(.room-info-box *),
  .main-body-wrapper .col-md-4 {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    position: static !important;
    display: block !important;
  }

  .fillDetails .bookDtlsArea,
  .fillDetails .left-side-box,
  .bookDtlsArea.left-side-box,
  .left-side-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 16px !important;
    left: auto !important;
    right: auto !important;
    position: static !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
  }
}

/* FormArea & Customer-Details Innen-Row als Flexbox */
.formArea,
.customer-details,
.customer_details,
.fillDetails .formArea,
.main-body-wrapper .formArea,
.fillDetails .formArea.sameHeight,
.fillDetails .col-md-8 .formArea,
.main-body-wrapper .col-md-8 .formArea,
.col-md-8 .formArea,
.col-md-8 .customer-details {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Alten/doppelten Zimmersoftware-Standard-Zurück-Link im Formular restlos ausblenden */
.fillDetails a[href*="history.back"],
.formArea a[href*="history.back"],
.main-body-wrapper a[href*="history.back"],
a:has(i.backbtn) {
  display: none !important;
}

/* Gastdaten-Formular: 2 Spalten nebeneinander (exakt 50% abzüglich Gap) */
.fillDetails .formArea .row,
.main-body-wrapper .formArea .row,
.formArea .row,
.customer-details .row,
.col-md-8 .formArea .row,
.col-md-8 .customer-details .row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Linke & rechte Spalte der Gastdaten-Felder: Jeweils exakt calc(50% - 8px) nebeneinander */
.fillDetails .formArea .col-md-6,
.fillDetails .formArea .col-sm-6,
.main-body-wrapper .formArea .col-md-6,
.fillDetails .col-md-8 .col-md-6,
.formArea .col-md-6,
.formArea .col-sm-6,
.customer-details .col-md-6,
.customer-details .col-sm-6,
.col-md-8 .col-md-6,
.col-md-8 .formArea .col-md-6,
.col-md-8 .customer-details .col-md-6 {
  flex: 0 0 calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  width: calc(50% - 8px) !important;
  min-width: 0 !important;
  float: left !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  clear: none !important;
}

/* Ganze Breite (z. B. Datenschutz-Checkbox, Bemerkungen, Buttons) */
.fillDetails .formArea .col-md-12,
.fillDetails .formArea .col-sm-12,
.main-body-wrapper .formArea .col-md-12,
.fillDetails .col-md-8 .col-md-12,
.formArea .col-md-12,
.formArea .col-sm-12,
.customer-details .col-md-12,
.customer-details .col-sm-12,
.col-md-8 .col-md-12,
.col-md-8 .formArea .col-md-12,
.col-md-8 .customer-details .col-md-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

@media (max-width: 767px) {
  .fillDetails .formArea .col-md-6,
  .formArea .col-md-6,
  .col-md-8 .formArea .col-md-6,
  .customer-details .col-md-6,
  .zs-company-field-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Überschrift "Ihre Daten" direkt über "Art der Reise" */
.zs-ihre-daten-wrapper {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}

.zs-ihre-daten-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

/* Überflüssigen Doppel-Trennstrich unter "Ihre Daten" entfernen: Es verbleibt der saubere Abschluss-Trennstrich unter Art der Reise */
.zs-ihre-daten-line,
.fillDetails hr,
.formArea hr,
.customer-details hr {
  display: none !important;
}

/* Umschalter Privatreise vs. Geschäftsreise */
.zs-travel-type-wrapper {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  margin-top: 6px !important;
  margin-bottom: 22px !important;
  padding-top: 0px !important;
  padding-bottom: 22px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  display: block !important;
}

.zs-travel-type-heading {
  margin-bottom: 12px !important;
  text-align: center !important;
}

.zs-travel-type-title {
  display: block !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 0px !important;
  text-align: center !important;
}

.zs-travel-type-sub {
  display: none !important;
}

.zs-travel-type-selector {
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.zs-travel-type-btn {
  flex: 1 1 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: var(--zs-radius-sm, 12px) !important;
  background: #f8fafc !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.zs-radio-icon {
  display: none !important;
}

.zs-btn-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
  align-items: center !important;
  line-height: 1.25 !important;
}

.zs-btn-text strong {
  font-size: 14px !important;
  color: #0f172a !important;
}

.zs-btn-text small {
  display: none !important;
}

.zs-travel-type-btn:hover {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.zs-travel-type-btn.active {
  background: #ffffff !important;
  border-color: var(--zs-primary) !important;
  color: var(--zs-primary) !important;
  box-shadow: 0 4px 16px rgba(var(--zs-primary-rgb, 15, 118, 110), 0.16) !important;
  border-width: 2px !important;
}

.zs-travel-type-btn.active .zs-btn-text strong {
  color: var(--zs-primary) !important;
}

/* Gastdaten-Felder initial auf Schritt 30 nur dann ausblenden, wenn die Reiseart-Auswahl tatsächlich im Formular existiert */
/* NIEMALS auf dem Meldeschein / Fragebogen (/q/ oder qci_form) anwenden! */
form:not([action*="/q/"]) .formArea .row.zs-has-travel-type:not(.zs-type-chosen) > .col-md-6,
form:not([action*="/q/"]) .formArea .row.zs-has-travel-type:not(.zs-type-chosen) > .col-md-12:not(.zs-travel-type-wrapper),
form:not([action*="/q/"]) .fillDetails .formArea .row.zs-has-travel-type:not(.zs-type-chosen) > .col-md-6,
form:not([action*="/q/"]) .fillDetails .formArea .row.zs-has-travel-type:not(.zs-type-chosen) > .col-md-12:not(.zs-travel-type-wrapper),
form:not([action*="/q/"]) .customer-details .row.zs-has-travel-type:not(.zs-type-chosen) > .col-md-6,
form:not([action*="/q/"]) .customer-details .row.zs-has-travel-type:not(.zs-type-chosen) > .col-md-12:not(.zs-travel-type-wrapper) {
  display: none !important;
}

/* Weiche Einblend-Animation, sobald Privatreise oder Geschäftsreise gewählt wurde */
.formArea .row.zs-type-chosen > .col-md-6:not(.zs-company-field-col),
.formArea .row.zs-type-chosen > .col-md-12:not(.m-t-23):not(.zs-company-divider-col):not(.zs-company-field-col),
.fillDetails .formArea .row.zs-type-chosen > .col-md-6:not(.zs-company-field-col),
.fillDetails .formArea .row.zs-type-chosen > .col-md-12:not(.m-t-23):not(.zs-company-divider-col):not(.zs-company-field-col) {
  display: block !important;
  animation: zsFadeIn 0.3s ease-out !important;
}

/* Firma-Feld & Firmen-Trennlinie: Standardmäßig (Privatreise) VOLLSTÄNDIG ausgeblendet */
/* Firma-Feld & Firmen-Trennlinie: Standardmäßig (Privatreise) VOLLSTÄNDIG ausgeblendet */
body:not(.zs-is-business) .zs-company-field-col:not(.zs-visible),
body:not(.zs-is-business) .zs-company-divider-col:not(.zs-visible),
.formArea:not(.zs-is-business) .zs-company-field-col:not(.zs-visible),
.formArea:not(.zs-is-business) .zs-company-divider-col:not(.zs-visible),
.row:not(.zs-is-business) .zs-company-field-col:not(.zs-visible),
.row:not(.zs-is-business) .zs-company-divider-col:not(.zs-visible),
div.zs-company-field-col:not(.zs-visible):not(.zs-is-business),
div.zs-company-divider-col:not(.zs-visible):not(.zs-is-business) {
  display: none !important;
}

/* Nur wenn Geschäftsreise aktiv ist (.zs-is-business oder .zs-visible), wird das Firmen-Feld eingeblendet (100% Breite) */
.zs-is-business .zs-company-field-col,
.formArea.zs-is-business .zs-company-field-col,
body.zs-is-business .zs-company-field-col,
div.zs-company-field-col.zs-visible,
.zs-company-field-col.zs-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  clear: both !important;
}

/* Firmenanschrift (Straße & Nr.) bei Geschäftsreise in die nächste Zeile setzen (100% Breite) */
.zs-is-business .col-md-6:has(input[name="cust[street]"]),
.zs-is-business .zs-street-col,
.formArea.zs-is-business .col-md-6:has(input[name="cust[street]"]),
.formArea.zs-is-business .zs-street-col {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  clear: both !important;
}

/* Feine Trennlinie oberhalb von "Firma / Unternehmensname" */
.zs-company-divider-col {
  display: none !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zs-is-business .zs-company-divider-col,
.formArea.zs-is-business .zs-company-divider-col,
body.zs-is-business .zs-company-divider-col,
.zs-company-divider-col.zs-visible,
div.zs-company-divider-col.zs-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  animation: zsFadeIn 0.3s ease-out !important;
}

.zs-company-line {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background-color: #e2e8f0 !important;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  clear: both !important;
}

.zs-company-section-title {
  display: block !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}

/* Nachricht / Besondere Wünsche an das Hotel */
.zs-message-col {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  clear: both !important;
  margin-top: 10px !important;
  margin-bottom: 6px !important;
  display: block !important;
  box-sizing: border-box !important;
}

form:not([action*="/q/"]) .formArea .row.zs-has-travel-type:not(.zs-type-chosen) > .zs-message-col,
form:not([action*="/q/"]) .fillDetails .formArea .row.zs-has-travel-type:not(.zs-type-chosen) > .zs-message-col,
form:not([action*="/q/"]) .customer-details .row.zs-has-travel-type:not(.zs-type-chosen) > .zs-message-col {
  display: none !important;
}

.formArea .row.zs-type-chosen > .zs-message-col,
.fillDetails .formArea .row.zs-type-chosen > .zs-message-col,
.customer-details .row.zs-type-chosen > .zs-message-col {
  display: block !important;
  animation: zsFadeIn 0.3s ease-out !important;
}

.zs-message-textarea {
  width: 100% !important;
  min-height: 84px !important;
  max-height: 220px !important;
  padding: 12px 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: var(--zs-radius-sm, 10px) !important;
  font-size: 13.5px !important;
  font-family: inherit !important;
  color: #1e293b !important;
  background: #ffffff !important;
  resize: vertical !important;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
}

.zs-message-textarea:focus {
  border-color: var(--zs-primary, #0f766e) !important;
  box-shadow: 0 0 0 3px rgba(var(--zs-primary-rgb, 15, 118, 110), 0.15) !important;
}

/* Eingabefelder im Formular */
.fillDetails .form-group,
.main-body-wrapper .form-group,
.formArea .form-group,
.customer-details .form-group,
.col-md-8 .form-group,
.form-group {
  margin-bottom: 18px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.fillDetails .form-group label,
.fillDetails label,
.main-body-wrapper .form-group label,
.main-body-wrapper label,
.formArea label,
.customer-details label,
.col-md-8 label,
.form-group label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 6px !important;
}

.fillDetails input[type="text"],
.fillDetails input[type="email"],
.fillDetails input[type="tel"],
.fillDetails select,
.fillDetails select.select_box,
.main-body-wrapper input[type="text"],
.main-body-wrapper input[type="email"],
.main-body-wrapper input[type="tel"],
.main-body-wrapper select,
.main-body-wrapper select.select_box,
.formArea input[type="text"],
.formArea input[type="email"],
.formArea input[type="tel"],
.formArea select,
.customer-details input[type="text"],
.customer-details input[type="email"],
.customer-details input[type="tel"],
.customer-details select,
.col-md-8 input[type="text"],
.col-md-8 input[type="email"],
.col-md-8 input[type="tel"],
.col-md-8 select,
.col-md-8 textarea {
  width: 100% !important;
  height: 46px !important;
  padding: 8px 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  font-size: 14px !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.col-md-8 textarea,
.formArea textarea,
.customer-details textarea {
  height: auto !important;
  min-height: 90px !important;
}

.fillDetails input:focus,
.fillDetails select:focus,
.main-body-wrapper input:focus,
.main-body-wrapper select:focus,
.formArea input:focus,
.formArea select:focus,
.customer-details input:focus,
.customer-details select:focus,
.col-md-8 input:focus,
.col-md-8 select:focus,
.col-md-8 textarea:focus {
  border-color: var(--zs-primary) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3.5px rgba(var(--zs-primary-rgb), 0.15) !important;
}

/* --- 8.4 PFLICHTFELD-VALIDIERUNG & ROTE FEHLER-HERVORHEBUNG (SIGNALFARBE ROT WIE DATENSCHUTZ-CHECKBOX) --- */
.fillDetails input.zs-input-error,
.fillDetails select.zs-input-error,
.fillDetails textarea.zs-input-error,
.main-body-wrapper input.zs-input-error,
.main-body-wrapper select.zs-input-error,
.main-body-wrapper textarea.zs-input-error,
.fillDetails .has-error input,
.fillDetails .has-error select,
.fillDetails .has-error textarea,
.main-body-wrapper .has-error input,
.main-body-wrapper .has-error select,
.main-body-wrapper .has-error textarea,
input.zs-input-error,
select.zs-input-error,
textarea.zs-input-error {
  background-color: #fef2f2 !important;
  border: 1.5px solid #ef4444 !important;
  color: #991b1b !important;
  box-shadow: 0 0 0 3.5px rgba(239, 68, 68, 0.22) !important;
  animation: zsShake 0.35s ease-in-out !important;
}

.zs-field-label-error,
label.zs-field-label-error,
.fillDetails label.zs-field-label-error,
.main-body-wrapper label.zs-field-label-error,
.fillDetails .form-group.zs-field-error label,
.main-body-wrapper .form-group.zs-field-error label,
.form-group.zs-field-error label,
.zs-field-error label,
.col-md-6.zs-field-error label,
.col-md-12.zs-field-error label {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.zs-field-label-error span,
label.zs-field-label-error span,
.fillDetails label.zs-field-label-error span,
.main-body-wrapper label.zs-field-label-error span,
.fillDetails .form-group.zs-field-error label span,
.main-body-wrapper .form-group.zs-field-error label span,
.form-group.zs-field-error label span,
.zs-field-error label span,
.col-md-6.zs-field-error label span,
.col-md-12.zs-field-error label span {
  color: #ef4444 !important;
  font-weight: 900 !important;
}

.fillDetails .checkbox.zs-checkbox-error,
.main-body-wrapper .checkbox.zs-checkbox-error,
.checkbox.zs-checkbox-error,
.zs-checkbox-error {
  background-color: #fef2f2 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 1.5px solid #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
  animation: zsShake 0.35s ease-in-out !important;
}

.fillDetails .checkbox.zs-checkbox-error label,
.main-body-wrapper .checkbox.zs-checkbox-error label,
.checkbox.zs-checkbox-error label,
.zs-checkbox-error label {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

@keyframes zsShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.fillDetails .checkbox.full,
.main-body-wrapper .checkbox.full,
.checkbox.full {
  margin: 18px 0 !important;
  font-size: 12px !important;
  color: #475569 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

/* Alle Buchen-Buttons sichtbar und ansprechend formatiert halten */

/* Doppelten "Zahlungspflichtig buchen"-Button im linken Formular (NUR auf Buchungsschritt 30) ausblenden */
/* NIEMALS auf dem Meldeschein / Fragebogen (/q/ oder qci_form) anwenden! */
form:not([action*="/q/"]):has(input[name="booking_step"]) .formArea .m-t-23:not(:has(button[name="confirm"])),
form:not([action*="/q/"]):has(input[name="booking_step"]) .fillDetails .formArea .m-t-23:not(:has(button[name="confirm"])),
form:not([action*="/q/"]):has(input[name="booking_step"]) .formArea button[name="nextstep"],
form:not([action*="/q/"]):has(input[name="booking_step"]) .formArea .all_btn:not([name="confirm"]),
form:not([action*="/q/"]):has(input[name="booking_step"]) .formArea button.submitBtn,
form:not([action*="/q/"]):has(input[name="booking_step"]) .fillDetails .col-md-8 .formArea button[name="nextstep"],
form:not([action*="/q/"]):has(input[name="booking_step"]) .fillDetails .col-md-8 .formArea button.submitBtn,
form:not([action*="/q/"]):has(input[name="booking_step"]) .fillDetails .col-md-8 .customer-details button[name="nextstep"],
form:not([action*="/q/"]):has(input[name="booking_step"]) .fillDetails .col-md-8 .customer-details button.submitBtn {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ==========================================================================
   ONLINE-MELDESCHEIN & GÄSTE-FRAGEBOGEN (/q/ oder qci_form)
   Stellt sicher, dass das Formular zur Datenergänzung nach der Buchung
   immer vollständig sichtbar, perfekt formatiert und fehlerfrei bedienbar ist.
   ========================================================================== */
/* Standard-Einleitungstext von Zimmersoftware ("Bitte ergänzen Sie die fehlenden Informationen...") restlos ausblenden */
form[action*="/q/"] p:not(.zs-questionnaire-sub),
body.zs-page-questionnaire p:not(.zs-questionnaire-sub),
body.zs-page-questionnaire .fillDetails p:not(.zs-questionnaire-sub),
body.zs-page-questionnaire .col-md-8 p:not(.zs-questionnaire-sub),
body.zs-page-questionnaire .formArea p:not(.zs-questionnaire-sub),
form[action*="/q/"] .fillDetails p:not(.zs-questionnaire-sub),
form[action*="/q/"] .col-md-8 p:not(.zs-questionnaire-sub),
form[action*="/q/"] .formArea p:not(.zs-questionnaire-sub),
.fillDetails:has(button[name="confirm"]) p:not(.zs-questionnaire-sub),
.col-md-8:has(button[name="confirm"]) p:not(.zs-questionnaire-sub),
.col-md-8:has(form[action*="/q/"]) p:not(.zs-questionnaire-sub),
div:has(> form[action*="/q/"]) > p:not(.zs-questionnaire-sub),
div:has(> form[action*="/q/"]) p:not(.zs-questionnaire-sub),
form[action*="/q/"] ~ p,
form:has(input[name="qci_form"]) p:not(.zs-questionnaire-sub),
.fillDetails:has(input[name="qci_form"]) p:not(.zs-questionnaire-sub) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Erlaubt ausschließlich den neuen sauberen Untertitel */
p.zs-questionnaire-sub,
.zs-questionnaire-header p.zs-questionnaire-sub,
body.zs-page-questionnaire .zs-questionnaire-header p {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  position: static !important;
  pointer-events: auto !important;
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}

/* Fragebogen FormArea Row: Echtes 2-Spalten Flexbox-Grid */
body.zs-page-questionnaire .formArea .row,
form[action*="/q/"] .formArea .row,
form:has(input[name="qci_form"]) .formArea .row,
.fillDetails:has(input[name="qci_form"]) .formArea .row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 16px !important;
  row-gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* mrArea entpacken (Vorname & Name werden direkte Flex-Spalten) */
body.zs-page-questionnaire .mrArea,
form[action*="/q/"] .mrArea,
form:has(input[name="qci_form"]) .mrArea,
.fillDetails:has(input[name="qci_form"]) .mrArea {
  display: contents !important;
}

/* FIRMEN-FELDER RESTLOS AUSBLENDEN (Nur Hauptgast-Daten erforderlich) */
input[name^="in[cpny]"],
select[name^="in[cpny]"],
input[name*="[cpny]"],
select[name*="[cpny]"],
.col-md-6:has(input[name*="cpny"]),
.col-md-6:has(select[name*="cpny"]),
.col-md-12:has(input[name*="cpny"]),
.form-group:has(input[name*="cpny"]),
.form-group:has(select[name*="cpny"]),
body.zs-page-questionnaire .col-md-6:has(input[name^="in[cpny]"]),
body.zs-page-questionnaire .col-md-6:has(select[name^="in[cpny]"]),
body.zs-page-questionnaire .col-md-12:has(input[name^="in[cpny]"]),
body.zs-page-questionnaire div:has(> .form-group > input[name^="in[cpny]"]),
body.zs-page-questionnaire div:has(> .form-group > select[name^="in[cpny]"]),
body.zs-page-questionnaire .zs-questionnaire-cpny-col,
form[action*="/q/"] .col-md-6:has(input[name^="in[cpny]"]),
form[action*="/q/"] .col-md-6:has(select[name^="in[cpny]"]),
form[action*="/q/"] .col-md-12:has(input[name^="in[cpny]"]),
form[action*="/q/"] div:has(> .form-group > input[name^="in[cpny]"]),
form[action*="/q/"] div:has(> .form-group > select[name^="in[cpny]"]),
form[action*="/q/"] .zs-questionnaire-cpny-col,
form:has(input[name="qci_form"]) .col-md-6:has(input[name^="in[cpny]"]),
form:has(input[name="qci_form"]) .col-md-6:has(select[name^="in[cpny]"]),
form:has(input[name="qci_form"]) .col-md-12:has(input[name^="in[cpny]"]),
form:has(input[name="qci_form"]) div:has(> .form-group > input[name^="in[cpny]"]),
form:has(input[name="qci_form"]) div:has(> .form-group > select[name^="in[cpny]"]),
form:has(input[name="qci_form"]) .zs-questionnaire-cpny-col,
.fillDetails:has(input[name="qci_form"]) .col-md-6:has(input[name^="in[cpny]"]),
.fillDetails:has(input[name="qci_form"]) .col-md-6:has(select[name^="in[cpny]"]),
.fillDetails:has(input[name="qci_form"]) .zs-questionnaire-cpny-col {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* 2-Spalten-Layout für alle Hauptgast-Felder (Vorname, Name, Mail, Tel, Straße, PLZ, Ort, Staat, Nationalität, Geburtsdatum etc.) */
body.zs-page-questionnaire .formArea .col-md-6:not(.zs-questionnaire-cpny-col):not(:has(input[name^="in[cpny]"])):not(:has(select[name^="in[cpny]"])),
form[action*="/q/"] .formArea .col-md-6:not(.zs-questionnaire-cpny-col):not(:has(input[name^="in[cpny]"])):not(:has(select[name^="in[cpny]"])),
form:has(input[name="qci_form"]) .formArea .col-md-6:not(.zs-questionnaire-cpny-col):not(:has(input[name^="in[cpny]"])):not(:has(select[name^="in[cpny]"])),
.fillDetails:has(input[name="qci_form"]) .formArea .col-md-6:not(.zs-questionnaire-cpny-col):not(:has(input[name^="in[cpny]"])):not(:has(select[name^="in[cpny]"])) {
  flex: 0 0 calc(50% - 8px) !important;
  width: calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  min-width: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Volle Breite für Reisedokument und weitere Sektionen */
body.zs-page-questionnaire .formArea .col-md-12:not(.zs-questionnaire-cpny-col):not(:has(button[name="confirm"])),
form[action*="/q/"] .formArea .col-md-12:not(.zs-questionnaire-cpny-col):not(:has(button[name="confirm"])),
form:has(input[name="qci_form"]) .formArea .col-md-12:not(.zs-questionnaire-cpny-col):not(:has(button[name="confirm"])),
.fillDetails:has(input[name="qci_form"]) .formArea .col-md-12:not(.zs-questionnaire-cpny-col):not(:has(button[name="confirm"])) {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 4px 0 !important;
  text-align: left !important;
}

/* Reisedokument: Dropdown und Passnummer nebeneinander formatieren */
body.zs-page-questionnaire .formArea .col-md-12 table:not(.fw),
form[action*="/q/"] .formArea .col-md-12 table:not(.fw) {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 12px 0 !important;
  margin-left: -12px !important;
}
body.zs-page-questionnaire .formArea .col-md-12 table:not(.fw) td,
form[action*="/q/"] .formArea .col-md-12 table:not(.fw) td {
  padding: 0 !important;
  vertical-align: middle !important;
}

/* Zentrierte Ausrichtung von Zimmersoftware aufheben (alles linksbündig) */
body.zs-page-questionnaire .formArea .m-t-23:not(:has(button[name="confirm"])),
form[action*="/q/"] .formArea .m-t-23:not(:has(button[name="confirm"])),
form:has(input[name="qci_form"]) .formArea .m-t-23:not(:has(button[name="confirm"])) {
  margin-top: 12px !important;
  text-align: left !important;
}

/* Sende-Button Zeile zentrieren */
body.zs-page-questionnaire .formArea .col-md-12:has(button[name="confirm"]),
form[action*="/q/"] .formArea .col-md-12:has(button[name="confirm"]),
form:has(input[name="qci_form"]) .formArea .col-md-12:has(button[name="confirm"]),
body.zs-page-questionnaire .formArea .m-t-23:has(button[name="confirm"]),
form[action*="/q/"] .formArea .m-t-23:has(button[name="confirm"]) {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin-top: 28px !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

/* RECHTE SPALTE (BUCHUNGSÜBERSICHT) AUF DEM MELDESCHEIN AUF HOCHGLANZ BRINGEN */
body.zs-page-questionnaire .bookDtlsArea,
body.zs-page-questionnaire .left-side-box,
body.zs-page-questionnaire .col-md-4 .bookDtlsArea,
form[action*="/q/"] ~ .col-md-4 .bookDtlsArea,
form[action*="/q/"] .bookDtlsArea,
form[action*="/q/"] .left-side-box,
.row:has(form[action*="/q/"]) .bookDtlsArea,
.row:has(form[action*="/q/"]) .left-side-box,
.row:has(button[name="confirm"]) .bookDtlsArea,
.row:has(button[name="confirm"]) .left-side-box {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
}
@media (min-width: 992px) {
  body.zs-page-questionnaire .bookDtlsArea,
  body.zs-page-questionnaire .left-side-box,
  .row:has(form[action*="/q/"]) .bookDtlsArea,
  .row:has(button[name="confirm"]) .bookDtlsArea {
    position: sticky !important;
    top: 90px !important;
  }
}

/* Titel "Ihre Buchung" */
body.zs-page-questionnaire .bookDtlsTitle h4,
.row:has(form[action*="/q/"]) .bookDtlsTitle h4,
.row:has(button[name="confirm"]) .bookDtlsTitle h4 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1.5px solid #f1f5f9 !important;
}

/* Detail-Listen in der rechten Box */
body.zs-page-questionnaire .bookDtlsArea ul,
body.zs-page-questionnaire .left-side-box ul,
.row:has(form[action*="/q/"]) .bookDtlsArea ul,
.row:has(button[name="confirm"]) .bookDtlsArea ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.zs-page-questionnaire .bookDtlsArea li,
body.zs-page-questionnaire .left-side-box li,
.row:has(form[action*="/q/"]) .bookDtlsArea li,
.row:has(button[name="confirm"]) .bookDtlsArea li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
  color: #475569 !important;
  border-bottom: 1px solid #f8fafc !important;
}

body.zs-page-questionnaire .bookDtlsArea li strong,
body.zs-page-questionnaire .bookDtlsArea li .val,
.row:has(form[action*="/q/"]) .bookDtlsArea li strong,
.row:has(form[action*="/q/"]) .bookDtlsArea li .val {
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* Buttons in Sidebar auf dem Meldeschein ausblenden (der einzige Button ist "Daten senden") */
body.zs-page-questionnaire .bookDtlsArea button,
body.zs-page-questionnaire .bookDtlsArea .submitBtn,
body.zs-page-questionnaire .left-side-box button,
body.zs-page-questionnaire .left-side-box .submitBtn,
.row:has(button[name="confirm"]) .bookDtlsArea .submitBtn {
  display: none !important;
}

/* Mobil-Optimierung für Smartphones unter 768px */
@media (max-width: 768px) {
  body.zs-page-questionnaire .formArea .col-md-6,
  form[action*="/q/"] .formArea .col-md-6,
  form:has(input[name="qci_form"]) .formArea .col-md-6 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.zs-page-questionnaire .formArea .col-md-12 table:not(.fw),
  form[action*="/q/"] .formArea .col-md-12 table:not(.fw) {
    border-spacing: 0 8px !important;
    margin-left: 0 !important;
  }
  body.zs-page-questionnaire .formArea .col-md-12 table:not(.fw) td,
  form[action*="/q/"] .formArea .col-md-12 table:not(.fw) td {
    display: block !important;
    width: 100% !important;
  }
}

body.zs-page-questionnaire .form-control,
form[action*="/q/"] .form-control,
form[action*="/q/"] select.select_box,
body.zs-page-questionnaire select.select_box {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.zs-page-questionnaire .form-control:focus,
form[action*="/q/"] .form-control:focus,
form[action*="/q/"] select.select_box:focus,
body.zs-page-questionnaire select.select_box:focus {
  border-color: var(--zs-primary, #0f766e) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18) !important;
  outline: none !important;
}

body.zs-page-questionnaire label,
form[action*="/q/"] label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
}
body.zs-page-questionnaire label span,
form[action*="/q/"] label span {
  color: #ef4444 !important;
  font-weight: 700 !important;
}

body.zs-page-questionnaire table.fw,
form[action*="/q/"] table.fw {
  width: 100% !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-top: 8px !important;
}
body.zs-page-questionnaire table.fw th,
form[action*="/q/"] table.fw th {
  background: #f1f5f9 !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}
body.zs-page-questionnaire table.fw td,
form[action*="/q/"] table.fw td {
  padding: 8px 10px !important;
}

/* Button "Daten senden" im Meldeschein/Fragebogen auffällig & modern stylen */
button[name="confirm"],
.all_btn[name="confirm"],
form[action*="/q/"] button.btn.all_btn,
form[action*="/q/"] button[name="confirm"],
body.zs-page-questionnaire button[name="confirm"],
body.zs-page-questionnaire button.all_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 48px !important;
  background-color: var(--zs-primary, #0f766e) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  padding: 14px 44px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  margin: 16px auto !important;
}
button[name="confirm"]:hover,
.all_btn[name="confirm"]:hover,
form[action*="/q/"] button.btn.all_btn:hover,
body.zs-page-questionnaire button[name="confirm"]:hover {
  background-color: var(--zs-primary-hover, #0d9488) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(15, 118, 110, 0.38) !important;
}

/* WICHTIG: Buttons für Zusatzleistungen / Extras (Schritt 25) NIEMALS ausblenden, sondern immer prominent & klickbar anzeigen! */
.fillDetails .col-md-8 .tableWrap button,
.fillDetails .col-md-8 .tableWrap .submitBtn,
.fillDetails .col-md-8 .tableWrap button.submitBtn,
.fillDetails .tableWrap button[name*="item"],
.fillDetails .tableWrap button[name="additem"],
.fillDetails .tableWrap button[name="deleteitem"],
.fillDetails .tableWrap button[name="delitem"],
.fillDetails .ratePart button,
.fillDetails .ratePart .submitBtn,
.tableWrap .ratePart button,
.tableWrap .ratePart .submitBtn,
.tableWrap .ratePart.fillprice button,
.tableWrap .ratePart.fillprice .submitBtn,
.tableWrap .ratestable button,
.tableWrap .ratestable .submitBtn,
.tableWrap button.submitBtn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 7px 16px !important;
  background: var(--zs-primary, #059669) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(var(--zs-primary-rgb, 5, 150, 105), 0.25) !important;
}

.bookDtlsArea.left-side-box {
  display: block !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--zs-radius, 16px) !important;
  padding: 24px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
  position: sticky !important;
  top: 90px !important;
  box-sizing: border-box !important;
}

.bookDtlsArea.left-side-box .bookDtlsTitle h4,
.bookDtlsArea .bookDtlsTitle h4,
.left-side-box .bookDtlsTitle h4,
.bookDtlsTitle h4 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #f1f5f9 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  display: block !important;
}

.bookDtlsArea.left-side-box .bookDtlsTitle h4::before,
.bookDtlsArea .bookDtlsTitle h4::before,
.left-side-box .bookDtlsTitle h4::before,
.bookDtlsTitle h4::before {
  content: none !important;
  display: none !important;
}

ul.detail_list,
.bookDtlsArea ul.detail_list,
.left-side-box ul.detail_list,
.bookDtlsArea.left-side-box ul.detail_list {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  width: 100% !important;
}

ul.detail_list li,
.bookDtlsArea ul.detail_list li,
.left-side-box ul.detail_list li,
.bookDtlsArea.left-side-box ul.detail_list li {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

ul.detail_list .detail_list_headline,
.bookDtlsArea .detail_list_headline,
.left-side-box .detail_list_headline {
  color: #64748b !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

ul.detail_list .val,
.bookDtlsArea .val,
.left-side-box .val,
.bookDtlsArea .detail_list_person_count,
.left-side-box .detail_list_person_count {
  color: #0f172a !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* Anzahl Personen: Wort "Personen" (.detail_list_attributes) komplett ausblenden, sodass nur noch die Zahl bleibt */
.detail_list_attributes,
.bookDtlsArea .detail_list_attributes,
.detail_list .detail_list_attributes,
.result-booking-customers .detail_list_attributes,
p.detail_list_attributes {
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bookDtlsArea .result-booking-customers,
.detail_list .result-booking-customers,
.result-booking-customers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bookDtlsArea ul.detail_list li:has(.detail_list_person_count) .val,
.detail_list li:has(.detail_list_person_count) .val {
  font-size: 0 !important;
}

.bookDtlsArea ul.detail_list li .detail_list_person_count,
.detail_list li .detail_list_person_count,
p.detail_list_person_count {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bookDtlsArea.left-side-box > h4:not(.noPadding),
.bookDtlsArea > h4:not(.noPadding),
.left-side-box > h4:not(.noPadding),
.bookDtlsArea h4:not(.noPadding):not(.bookDtlsTitle *):not(.bookDtlsTitle) {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 16px 0 8px 0 !important;
}

.bookDtlsArea.left-side-box ul.room-list,
.bookDtlsArea.left-side-box ul.comfort-room-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.bookDtlsArea.left-side-box ul.room-list li,
.bookDtlsArea.left-side-box ul.comfort-room-list li {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #f8fafc !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  gap: 10px !important;
}

.bookDtlsArea.left-side-box ul.room-list .room-price,
.bookDtlsArea.left-side-box ul.comfort-room-list .room-price {
  font-weight: 800 !important;
  color: var(--zs-primary) !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

.bookDtlsArea.left-side-box ul.full,
.bookDtlsArea ul.full,
.left-side-box ul.full {
  list-style: none !important;
  padding: 9px 12px !important;
  margin: 8px 0 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.bookDtlsArea.left-side-box ul.full li.info,
.bookDtlsArea ul.full li.info,
.left-side-box ul.full li.info {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #166534 !important;
}

.bookDtlsArea.left-side-box ul.full li.val,
.bookDtlsArea ul.full li.val,
.left-side-box ul.full li.val {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #166534 !important;
}

.bookDtlsArea.left-side-box .totalPrice {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin: 16px 0 !important;
}

.bookDtlsArea.left-side-box .totalPrice h4 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.bookDtlsArea.left-side-box .totalPrice span.pull-right {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--zs-primary) !important;
}

/* Button "Zahlungspflichtig buchen" in der rechten Zusammenfassung in Primärfarbe */
.left-side-box .submitBtn,
.left-side-box button[name="nextstep"],
.bookDtlsArea button[name="nextstep"],
.bookDtlsArea .submitBtn,
.bookDtlsArea button.submitBtn {
  background: var(--zs-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--zs-radius-sm, 10px) !important;
  padding: 14px 24px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(var(--zs-primary-rgb), 0.38) !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 14px !important;
}

.left-side-box .submitBtn:hover,
.left-side-box button[name="nextstep"]:hover,
.bookDtlsArea button[name="nextstep"]:hover,
.bookDtlsArea .submitBtn:hover,
.bookDtlsArea button.submitBtn:hover {
  background: var(--zs-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(var(--zs-primary-rgb), 0.48) !important;
}

/* Rechtlicher Hinweis direkt unter dem Gesamtpreis */
.zs-vat-notice {
  display: block !important;
  font-size: 11px !important;
  color: #64748b !important;
  text-align: center !important;
  margin-top: 6px !important;
  margin-bottom: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  clear: both !important;
  width: 100% !important;
}

/* Hinweis unter dem "Zahlungspflichtig buchen"-Button (Schritt 30) */
.zs-payment-under-button-notice {
  display: block !important;
  font-size: 11px !important;
  color: #64748b !important;
  text-align: center !important;
  margin-top: 10px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  clear: both !important;
  width: 100% !important;
  padding: 0 4px !important;
}

/* --- 8.4 ZURÜCK-BUTTON MIT PFEIL FÜR GÄSTE --- */
.zs-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  margin-bottom: 14px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  user-select: none !important;
  text-decoration: none !important;
}

.zs-back-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
  transform: translateX(-2px) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

.zs-back-arrow {
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  transition: transform 0.2s ease !important;
}

.zs-back-btn:hover .zs-back-arrow {
  transform: translateX(-3px) !important;
}

/* --- 8.5 ZUSATZLEISTUNGEN / EXTRAS (SCHRITT 25) --- */
/* Bereich "Zusatzleistungen optional" optisch exakt wie .zs-addons-section ("Beliebte zubuchbare Extras & Optionen:") */
.fillDetails .col-md-8:has(.tableWrap),
.fillDetails .col-md-8:has(.zs-addons-section),
.fillDetails .container .col-md-8:has(.tableWrap),
.main-body-wrapper .col-md-8:has(.tableWrap) {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

.fillDetails .col-md-8 .zs-addons-section-step25 {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  box-shadow: none !important;
}

/* Header-Leiste mit Titel und "Optional zubuchbar"-Badge */
.zs-step25-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  width: 100% !important;
}

.zs-step25-header .zs-addons-header-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.zs-step25-header .zs-addons-section-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}

/* Fallback falls noch kein JS geladen */
.fillDetails .col-md-8:has(.tableWrap):not(:has(.zs-step25-header)):not(:has(.zs-addons-section))::before {
  content: "🎁 Beliebte zubuchbare Extras & Optionen:";
  display: block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.fillDetails .col-md-8:has(.zs-addons-section)::before,
.fillDetails .col-md-8:has(.zs-step25-header)::before {
  display: none !important;
  content: none !important;
}

/* Rohe Zimmersoftware-Artikelzeilen vollständig ausblenden, sobald unser modernes Kacheldesign aktiv ist */
.fillDetails .col-md-8:has(.zs-addons-grid-step25) .tableWrap,
.fillDetails .col-md-8:has(.zs-addon-card) .tableWrap,
.fillDetails .tableWrap.zs-hidden-raw,
.tableWrap.zs-hidden-raw {
  display: none !important;
}

/* Artikelkarten exakt wie .zs-addon-card */
.fillDetails .dFlex.tableWrap,
.tableWrap.dFlex,
.tableWrap {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.fillDetails .dFlex.tableWrap:hover,
.tableWrap.dFlex:hover,
.tableWrap:hover {
  border-color: var(--zs-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-1px) !important;
}

/* Ausgewählte Karte (wenn zugebucht) */
.tableWrap:has(.zs-card-cancel-cross),
.tableWrap.zs-extra-selected {
  border-color: var(--zs-primary) !important;
  background: #f0fdf4 !important;
  box-shadow: 0 2px 8px rgba(var(--zs-primary-rgb), 0.15) !important;
}

.zs-extras-heading {
  display: none !important;
}

/* Zusatzleistungen / Extras: Button "HINZUFÜGEN" deutlich kleiner & dezenter */
button[name="additem"],
button[name="deleteitem"],
button[name="delitem"],
button[name="removeitem"],
button[name*="item"],
.ratePart.fillprice button,
.ratePart.fillprice .submitBtn,
.fillprice button.submitBtn,
.fillDetails .ratePart button,
.tableWrap .ratePart button,
.tableWrap .ratePart.fillprice button,
.tableWrap .ratestable button,
.dFlex.tableWrap button.submitBtn,
.dFlex.tableWrap button {
  width: auto !important;
  min-width: unset !important;
  max-width: unset !important;
  padding: 7px 16px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.04em !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(var(--zs-primary-rgb), 0.25) !important;
  margin: 0 !important;
  height: auto !important;
  min-height: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  transition: all 0.15s ease !important;
  background: var(--zs-primary, #059669) !important;
  color: #ffffff !important;
  border: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

button[name="deleteitem"],
button[name="delitem"],
button[name="removeitem"],
.tableWrap button.delBtn {
  background: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}

button[name="deleteitem"]:hover,
button[name="delitem"]:hover,
button[name="removeitem"]:hover,
.tableWrap button.delBtn:hover {
  background: #dc2626 !important;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35) !important;
}

button[name="additem"]:hover,
button[name="deleteitem"]:hover,
button[name*="item"]:hover,
.ratePart.fillprice button:hover,
.ratePart.fillprice .submitBtn:hover,
.fillprice button.submitBtn:hover,
.fillDetails .ratePart button:hover,
.tableWrap .ratePart button:hover,
.dFlex.tableWrap button.submitBtn:hover {
  background: var(--zs-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(var(--zs-primary-rgb), 0.35) !important;
}

button[name="additem"]:active,
button[name*="item"]:active,
.ratePart.fillprice button:active {
  transform: translateY(0) !important;
}

/* Zusatzleistungen / Extras: Artikel-Karten sauber, aufgeräumt und Button hochgesetzt */
.fillDetails .dFlex.tableWrap,
.tableWrap.dFlex,
.tableWrap {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 18px !important;
  border-radius: var(--zs-radius-sm, 12px) !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.tableWrap .showxs,
.tableWrap .full.showxs {
  flex: 1 1 auto !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tableWrap .hotContent,
.tableWrap .hotContent.norates,
.tableWrap .hotContent.norates.dblock {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 !important;
  margin: 0 0 2px 0 !important;
  gap: 12px !important;
}

/* Artikelname exakt wie .zs-addon-title */
.tableWrap .hotContent h4,
.tableWrap .hotContent > h4,
.tableWrap .showxs h4,
.tableWrap h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  min-width: unset !important;
}

/* Preis exakt wie .zs-addon-price */
.tableWrap .finalr,
.tableWrap .hotContent .finalr,
.fillDetails .tableWrap .finalr,
.dFlex.tableWrap .finalr,
.room-extra + .hotContent .finalr {
  font-size: 13px !important;
  font-weight: 850 !important;
  color: var(--zs-primary) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Beschreibungstext etwas kleiner & dezenter */
.tableWrap .roomDesc p,
.tableWrap .full.roomDesc p,
.fillDetails .tableWrap .roomDesc p,
.dFlex.tableWrap .roomDesc p,
.tableWrap .roomDesc {
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #64748b !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
}

/* Rechte Spalte mit Preis & Hinzufügen-Button hochgesetzt auf Höhe des Titels */
.tableWrap .ratePart.fillprice,
.tableWrap .ratePart {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  align-self: flex-start !important;
  justify-content: flex-end !important;
}

.tableWrap .ratePart.fillprice .ratestable,
.tableWrap .ratestable {
  display: flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Button "Hinzufügen" hochsetzen */
.tableWrap button[name="additem"],
.tableWrap button[name*="item"],
.tableWrap .ratePart button,
.tableWrap .submitBtn {
  align-self: flex-start !important;
  margin-top: 0 !important;
}

/* Kleines Kreuz zum Stornieren ausgewählter Artikel */
.zs-cancel-cross,
.zs-card-cancel-cross {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border-radius: 50% !important;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-left: 6px !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
  vertical-align: middle !important;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15) !important;
}

.zs-cancel-cross:hover,
.zs-card-cancel-cross:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
  transform: scale(1.15) !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35) !important;
}

.tableWrap .zs-card-cancel-cross {
  align-self: flex-start !important;
  margin-top: 2px !important;
}

/* --- 8.6 SCHRITT 40: ZIMMERSOFTWARE STANDARD-BUCHUNGSBESTÄTIGUNG (HOCHWERTIGES DESIGN) --- */

/* --- 8.6b SCHRITT 40: BEREICH NACH BESTÄTIGUNGS-MELDUNG AUSBLENDEN (Details folgen per E-Mail) --- */
/* Bild 072226: Druckleiste "Buchungsbestätigung" komplett ausblenden */
.printArea,
.dTable.printArea,
.printCon,
.printBtn,
a[onclick*="print"],
.fa-print,
.print-icon,
.bookingConfoArea .printArea,
.confirmationArea .printArea,
.confirmArea .printArea,
.yourBooking .printArea,

/* Bild 072350: Native Meldung mit grünem Haken komplett ausblenden */
.alert,
.alert-success,
.alert-info,
.booking-message,
.confoMsg,
.success-msg,
.confirmation-success,
.bookingConfoArea .alert,
.bookingConfo .alert,
.confirmationArea .alert,
.confirmArea .alert,
.yourBooking .alert,
.bookingConfoArea > p,
.bookingConfo > p,
.confirmationArea > p,
.confirmArea > p,
.yourBooking > p,
.bookingConfoArea h2,
.bookingConfoArea h3,
.bookingConfo h2,
.bookingConfo h3,
.confirmationArea h2,
.confirmArea h2,

/* Tabellen, Listen, Hotelkasten & Summen nach der Meldung ausblenden */
.bookingConfoArea table,
.bookingConfo table,
.confirmationArea table,
.confirmArea table,
.fillDetails table,
.main-body-wrapper table,
.confirm-table,
.summaryTable,
.bookingConfoArea ul,
.bookingConfo ul,
.confirmationArea ul,
.confirmArea ul,
.yourBooking ul,
.bookingCond,
ul.bookingCond,
.hotelInf,
.contact-card-box,
.contact-box-wrapper,
.bookingConfoArea .col-md-4,
.confirmationArea .col-md-4,
.confirmArea .col-md-4,
.yourBooking .col-md-4,
.totalPrice,
.grandSumme,
.finalPrice,
.zs-zimmer-row,
.zs-standard-room-preview,
.bookingConfo hr,
.confirmationArea hr,
.confirmArea hr {
  display: none !important;
}

/* Hauptkasten aufgeräumt und zentriert */
.bookingConfoArea .col-md-8,
.yourBooking .col-md-8,
.confirmationArea .col-md-8,
.confirmArea .col-md-8,
.bookingConfo,
.confirmation-box {
  width: 100% !important;
  max-width: 700px !important;
  margin: 20px auto 30px auto !important;
  float: none !important;
  text-align: center !important;
  padding: 36px 28px !important;
}


.bookingConfoArea,
.yourBooking,
.confirmationArea,
.confirmArea {
  width: 100% !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
}

/* Hauptkarten Bestätigung (links) & Zimmersoftware-Container */
/* Äußere Wrapper-Spalten transparent, wenn innere Karten vorhanden sind (verhindert doppelten Rahmen) */
.bookingConfoArea .col-md-8:has(.bookingConfo),
.bookingConfoArea .col-md-4:has(.hotelInf),
.yourBooking .col-md-8:has(.bookingConfo),
.yourBooking .col-md-4:has(.hotelInf) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.bookingConfo,
.confirmation-box,
.fillDetails .col-md-8:not(:has(.bookingConfo)):has(table),
.main-body-wrapper .col-md-8:not(:has(.bookingConfo)):has(table) {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--zs-radius, 16px) !important;
  padding: 28px 32px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
  margin-bottom: 20px !important;
}

/* Titel "Buchungsbestätigung" mit Drucken-Symbol */
.bookingConfo h2,
.bookingConfo h3,
.bookingConfo h4,
.bookingConfoArea h2,
.bookingConfoArea h3,
.confirmationArea h2,
.confirmationArea h3,
.confirmationArea h4,
.confirmArea h2,
.confirmArea h3,
.fillDetails h2,
.fillDetails h3,
.main-body-wrapper h2,
.main-body-wrapper h3 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  letter-spacing: -0.01em !important;
}

/* Drucken-Icon / Button oben rechts in der Bestätigung */
.fa-print,
a[onclick*="print"],
.printBtn a,
.printBtn .all_btn,
.print-icon {
  color: #ffffff !important;
  background: var(--zs-primary, #059669) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--zs-radius-sm, 10px) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.fa-print:hover,
a[onclick*="print"]:hover,
.printBtn a:hover,
.printBtn .all_btn:hover {
  background: var(--zs-primary-hover, #047857) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.printBtn a img {
  filter: brightness(0) invert(1) !important;
  margin-left: 6px !important;
  width: 16px !important;
}

/* Zimmersoftware Buchungs-Details (Listenstruktur) */
.bookingConfo ul {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 8px !important;
  margin: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  list-style: none !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
  transition: background 0.15s ease !important;
}

.bookingConfo ul:hover {
  background: #f8fafc !important;
}

.bookingConfo ul li.info {
  width: auto !important;
  max-width: 45% !important;
  float: none !important;
  font-weight: 700 !important;
  color: #64748b !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 12px 0 0 !important;
  box-sizing: border-box !important;
}

.bookingConfo ul li.val {
  width: auto !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  float: none !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
  text-align: right !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Tabellen-Layout der Bestätigungs-Details (Fallback wenn Tabelle gerendert) */
.bookingConfo table,
.bookingConfoArea table,
.confirmationArea table,
.confirmArea table,
.fillDetails table,
.main-body-wrapper table,
.confirm-table,
.summaryTable {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  margin: 12px 0 20px 0 !important;
  box-sizing: border-box !important;
}

.bookingConfo table tr,
.bookingConfoArea table tr,
.confirmationArea table tr,
.confirmArea table tr,
.fillDetails table tr,
.main-body-wrapper table tr {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.15s ease !important;
}

.bookingConfo table tr:hover,
.bookingConfoArea table tr:hover,
.confirmationArea table tr:hover,
.confirmArea table tr:hover,
.fillDetails table tr:hover,
.main-body-wrapper table tr:hover {
  background: #f8fafc !important;
}

.bookingConfo table td,
.bookingConfoArea table td,
.confirmationArea table td,
.confirmArea table td,
.fillDetails table td,
.main-body-wrapper table td {
  padding: 10px 8px !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* Linke Spalte (Beschriftung) */
.bookingConfo table td:first-child,
.bookingConfoArea table td:first-child,
.confirmationArea table td:first-child,
.confirmArea table td:first-child,
.fillDetails table td:first-child,
.main-body-wrapper table td:first-child {
  font-weight: 700 !important;
  color: #64748b !important;
  width: 1% !important;
  white-space: nowrap !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* Rechte Spalte (Werte) */
.bookingConfo table td:last-child,
.bookingConfoArea table td:last-child,
.confirmationArea table td:last-child,
.confirmArea table td:last-child,
.fillDetails table td:last-child,
.main-body-wrapper table td:last-child {
  font-weight: 700 !important;
  color: #0f172a !important;
  width: auto !important;
  text-align: right !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
}

/* Schlüsselcode & Buchungsreferenz schön hervorheben */
.bookingConfo [style*="color: #c59b27"],
.bookingConfo [style*="color:#c59b27"],
.bookingConfo [style*="color: rgb(197, 155, 39)"],
.confirmationArea [style*="color: #c59b27"],
.confirmationArea [style*="color:#c59b27"],
.confirmationArea [style*="color: rgb(197, 155, 39)"],
.confirmArea [style*="color: #c59b27"],
.confirmArea [style*="color:#c59b27"],
.confirmArea [style*="color: rgb(197, 155, 39)"],
.fillDetails [style*="color: #c59b27"],
.fillDetails [style*="color:#c59b27"],
.fillDetails [style*="color: rgb(197, 155, 39)"],
.main-body-wrapper [style*="color: #c59b27"],
.main-body-wrapper [style*="color:#c59b27"],
.main-body-wrapper [style*="color: rgb(197, 155, 39)"],
.finalPrice,
.totalPrice,
.grandSumme {
  color: var(--zs-primary) !important;
  font-weight: 900 !important;
  font-size: 20px !important;
}

/* Trennlinien & Summenblock */
.bookingConfo hr,
.confirmationArea hr,
.confirmArea hr,
.fillDetails hr,
.main-body-wrapper hr {
  border: none !important;
  border-top: 1.5px solid #e2e8f0 !important;
  margin: 16px 0 !important;
}

/* Rechter Kontakt-Kasten (Desktop) */
@media (min-width: 992px) {
  .bookingConfoArea .col-md-8,
  .yourBooking .col-md-8 {
    width: 66.66666667% !important;
    float: left !important;
  }

  .bookingConfoArea .col-md-4,
  .confirmationArea .col-md-4,
  .confirmArea .col-md-4,
  .contact-box-wrapper {
    width: 33.33333333% !important;
    float: left !important;
    box-sizing: border-box !important;
  }
}

.hotelInf,
.bookingConfoArea .col-md-4:not(:has(.hotelInf)),
.confirmationArea .col-md-4 > div,
.confirmArea .col-md-4 > div,
.contact-card-box {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--zs-radius, 16px) !important;
  padding: 24px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

.bookingConfoArea .col-md-4 h4,
.hotelInf h5,
.confirmationArea .col-md-4 h4,
.confirmArea .col-md-4 h4 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #f1f5f9 !important;
}

.bookingConfoArea .col-md-4 i.fa,
.hotelInf i.fa,
.confirmationArea .col-md-4 i.fa,
.confirmArea .col-md-4 i.fa {
  color: var(--zs-primary) !important;
  width: 18px !important;
  margin-right: 8px !important;
}

.bookingConfoArea .col-md-4 a,
.hotelInf a,
.confirmationArea .col-md-4 a,
.confirmArea .col-md-4 a {
  color: #0f172a !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.bookingConfoArea .col-md-4 a:hover,
.hotelInf a:hover,
.confirmationArea .col-md-4 a:hover,
.confirmArea .col-md-4 a:hover {
  color: var(--zs-primary) !important;
  text-decoration: underline !important;
}

/* --- 8.7 DRUCKANSICHT FÜR BUCHUNGSBESTÄTIGUNG (PRINT & PDF) --- */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .homeBanner, .bannerBg, .qrdes, .webbooking-overlay, header, nav, .footer, footer, .printBtn, .all_btn, .zs-trust-container, .zs-sticky-mobile-bar, button {
    display: none !important;
  }
  .bookingConfoArea, .confirmationArea, .confirmArea, .yourBooking, .fillDetails, .main-body-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
  .bookingConfo, .hotelInf, .confirmation-box {
    box-shadow: none !important;
    border: 1px solid #cbd5e1 !important;
    page-break-inside: avoid !important;
  }
}

/* --- 9. FOOTER VOLLSTÄNDIG AUSBLENDEN (REDUNDANT BEI EINBETTUNG) --- */
footer, .footer, .be_footer, .footer-section, .footer-bottom, .bottom-footer, #footer, div[class*="footer"], .cpny-footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- 10. MOBILE EXKLUSIVE BUCHUNGSMASKE (max-width: 768px) --- */
/* WICHTIG: Greift NUR auf Mobilgeräten. Die Desktop-Version bleibt 100% unverändert! */
@media screen and (max-width: 768px) {
  html, body {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .be_header .head-navigaton {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    height: auto !important;
    padding: 10px 14px !important;
  }

  header.be_header {
    height: auto !important;
    max-height: none !important;
  }

  .cpny-header-information {
    margin: 4px 0 !important;
  }

  /* 10.1 MAXIMALE BREITEN-NUTZUNG AUF SMARTPHONES (Kein Verschenken von Platz nach links & rechts) */
  #wrapper,
  #content,
  .container,
  .container-fluid,
  .s_10_container,
  .booking-fields-box,
  .booking-fields-box .container-fluid,
  .booking-fields-box .row,
  .booking-fields-box .col-xl-9,
  .booking-fields-box .col-xl-8,
  .booking-fields-box .col-md-12,
  .booking-wrapper,
  .booking-wrapper .container,
  .booking-wrapper .container-fluid,
  .main-body-wrapper,
  .main-body-wrapper .container,
  .main-body-wrapper > .container,
  .main-body-wrapper .row,
  .main-body-wrapper .col-xl-12,
  .main-body-wrapper .col-lg-8,
  .fillDetails,
  .fillDetails .container,
  .fillDetails > .container,
  section.fillDetails > .container,
  .fillDetails .row,
  .customer-details,
  .customer-details .container,
  .customer-details .row,
  .customer_details,
  .customer_details .container,
  .customer_details .row,
  form#form,
  form#form_booking,
  form#form > .container,
  form#form_booking > .container,
  form#form .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .booking-fields-box {
    padding: 0 !important;
    margin-bottom: 16px !important;
  }

  /* 10.2 DIE MOBILE BUCHUNGSMASKE: KEINE DOPPELTEN RAHMEN (Volle Breite für Felder) */
  .inner-booking-fields-box {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 10px !important;
  }

  /* 10.3 DATUMSAUSWAHL: ANREISE & ABREISE NEBENEINANDER MIT MAXIMALER TOUCH-FLÄCHE */
  .calender_box {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .t-datepicker {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Anreise- und Abreise-Boxen: Je 50% Breite, touchfreundliche 56px Höhe */
  .t-datepicker {
    position: relative !important;
  }

  .t-check-in, 
  .t-check-out {
    flex: 1 1 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    max-width: 50% !important;
    height: 56px !important;
    min-height: 56px !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 6px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    position: static !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }

  .t-check-in:hover, 
  .t-check-out:hover,
  .t-check-in.target-cal, 
  .t-check-out.target-cal,
  .t-check-in:focus-within, 
  .t-check-out:focus-within {
    border-color: var(--zs-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(var(--zs-primary-rgb), 0.14) !important;
  }

  /* Saubere kleine Label-Vorschau oben im Datumsfeld */
  .t-check-in::before {
    content: "Anreise" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .t-check-out::before {
    content: "Abreise" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .t-check-in .t-dates,
  .t-check-out .t-dates,
  .t-date-check-in,
  .t-date-check-out {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .t-check-in .fa-calendar,
  .t-check-out .fa-calendar,
  .t-dates .fa-calendar,
  .t-dates i {
    font-size: 13px !important;
    color: var(--zs-primary) !important;
    margin-right: 2px !important;
    flex-shrink: 0 !important;
  }

  /* Kalender-Popup zentriert auf Mobilgeräten: Kein Abschneiden am rechten Rand */
  .t-datepicker-day,
  .t-check-in .t-datepicker-day,
  .t-check-out .t-datepicker-day,
  .datepicker-dropdown,
  .datepicker.dropdown-menu,
  .bootstrap-datetimepicker-widget,
  .ui-datepicker,
  .daterangepicker {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 62px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.24) !important;
    border-radius: 16px !important;
    padding: 14px 10px !important;
    z-index: 9999999 !important;
  }

  /* 10.4 ANZAHL DER PERSONEN: Großzügige 100% breite Touch-Kachel */
  .filter_control-outer.filter_control-person {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  .filter_control-outer.filter_control-person span,
  .filter_control-outer.filter_control-person .travelCount {
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .filter_control-outer.filter_control-person .travelCount::before {
    content: "👤 Personen / Gäste" !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .filter_control-outer.filter_control-person:hover span,
  .filter_control-outer.filter_control-person:hover .travelCount,
  .filter_control-outer.filter_control-person:focus-within .travelCount {
    border-color: var(--zs-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(var(--zs-primary-rgb), 0.14) !important;
  }

  /* Personen-Popup Modal auf Mobilgeräten */
  .modal.room-persons-poppup-modal .modal-dialog,
  .room-persons-poppup-modal .modal-dialog {
    margin: 20px auto !important;
    max-width: calc(100vw - 28px) !important;
    width: 100% !important;
  }

  .room-persons-popup-box,
  .room-persons-poppup-modal .modal-content {
    border-radius: 18px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 45px -4px rgba(0, 0, 0, 0.25) !important;
    padding: 20px 16px !important;
    background: #ffffff !important;
  }

  .room-persons-popup-box .numbers-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .room-persons-popup-box .numbers-row-inner strong {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }

  .room-persons-popup-box select.select_box2,
  .room-persons-popup-box select {
    height: 46px !important;
    padding: 6px 16px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background: #f8fafc !important;
  }

  .room-persons-popup-box .confirm-button a,
  .room-persons-popup-box .confirm-button button,
  .filter_control-person .confirm-button a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 50px !important;
    margin-top: 16px !important;
    background: var(--zs-primary) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(var(--zs-primary-rgb), 0.3) !important;
  }

  .room-persons-popup-box .confirm-button a::after {
    content: "Auswahl übernehmen" !important;
  }

  /* 10.5 SUCHEN / AKTUALISIEREN BUTTON */
  .filter_control-outer {
    width: 100% !important;
  }

  .booking-fields-box input.submitBtn,
  .filter_control-outer .submitBtn,
  input.submitBtn,
  button.submitBtn {
    width: 100% !important;
    min-width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 6px 18px rgba(var(--zs-primary-rgb), 0.35) !important;
    margin-top: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 10.6 ZIMMERKARTEN AUF MOBILGERÄTEN: BILD IN VOLLER BREITE OBEN, BESCHREIBUNG DIREKT DARUNTER */
  .room-info-box {
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.06) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .room-info-box .row,
  .booking-wrapper .room-info-box .row,
  .main-body-wrapper .room-info-box .row,
  div.room-info-box > .row,
  div.room-info-box .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* 10.6 ZIMMERKARTEN AUF MOBILGERÄTEN: BILD IN VOLLER BREITE OBEN, NAME & BESCHREIBUNG DIREKT DARUNTER */
  .room-info-box {
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.06) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .room-info-box .row,
  .booking-wrapper .room-info-box .row,
  .main-body-wrapper .room-info-box .row,
  div.room-info-box > .row,
  div.room-info-box .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Bild-Container oben: 100% Bildschirmbreite ohne graue Zwischenräume */
  .room-info-box .col-xl-5,
  .room-info-box .col-lg-5,
  .room-info-box .col-md-5,
  .room-info-box .col-sm-5,
  .room-info-box .col-xs-12,
  .booking-wrapper .room-info-box .col-xl-5,
  .main-body-wrapper .room-info-box .col-xl-5,
  .room-info-box .zs-hero-image-wrapper {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 220px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background: transparent !important;
  }

  .zs-room-image-frame,
  .room-info-box .zs-room-image-frame {
    width: 100% !important;
    height: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: relative !important;
    background: transparent !important;
  }

  .zs-room-hero-img,
  .room-info-box .zs-room-hero-img,
  .room-info-box .col-xl-5 img,
  .room-info-box img,
  .room-info-box .lbNew img {
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 220px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* LightSlider & Galerielisten auf 100% Breite */
  .room-info-box .arinGal,
  .room-info-box .lbNew,
  .room-info-box .responsiveSlider,
  .room-info-box .cS-hidden {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Zimmer-Inhalt & Beschreibung: 100% Breite direkt unter dem Bild */
  .room-info-box .col-xl-7,
  .room-info-box .col-lg-7,
  .room-info-box .col-md-7,
  .room-info-box .col-sm-7,
  .room-info-box .col-xs-12,
  .booking-wrapper .room-info-box .col-xl-7,
  .main-body-wrapper .room-info-box .col-xl-7 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .room-info-box .room-detail-box {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Text- und Badge-Inhalte der Zimmerkarte erhalten seitlichen Abstand */
  .room-detail-box > *:not(.zs-card-action-row):not(.bookr):not(.rateplan_submitBtn):not(button),
  .room-detail-box .zs-card-title-col,
  .room-detail-box h4,
  .room-detail-box .zs-amenity-badges,
  .room-detail-box .roomDesc,
  .room-detail-box p,
  .room-detail-box .zs-card-price-col {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* Durch display: contents nehmen Titel und Preis als eigenständige Flex-Kinder an der Reihenfolge teil */
  .zs-card-header-row {
    display: contents !important;
  }

  /* 1. Zimmer-Überschrift ganz oben direkt unter dem Bild mit dezentem Abstand in 1 Zeile */
  .zs-card-title-col {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .zs-card-title-col h4,
  .room-info-box h4,
  .room-info-box .room-detail-box h4,
  .room-detail-box .zs-card-header-row h4 {
    font-size: 13.5px !important; /* Etwas kleiner, damit der Name komplett in eine Zeile passt */
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    margin-top: 2px !important; /* Höher gesetzt, dezenter Abstand direkt unter dem Bild */
    margin-bottom: 6px !important;
    color: #0f172a !important;
    width: 100% !important;
    display: block !important;
    white-space: nowrap !important; /* Passt garantiert in eine Zeile ohne Unterbrechung */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  /* 2. Badges direkt unter der Überschrift */
  .zs-badges-container,
  .zs-amenities-wrap,
  .zs-badges-inline,
  .roomDesc,
  .full.roomDesc,
  .room-detail-list,
  .roomDesc table,
  .roomDesc table tbody {
    order: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 2px 0 6px 0 !important;
    padding: 0 !important;
  }

  .roomDesc table tr,
  .roomDesc table td,
  .zs-amenity-badge,
  .zs-badge,
  .zs-amenity-pill {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    padding: 2.5px 6px !important;
    border-radius: 6px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3.5px !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
  }

  .zs-icon,
  svg.zs-icon {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0 !important;
  }

  /* 3. Preis nach den Badges in der rechten unteren Ecke */
  .zs-card-price-col {
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
    margin-left: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  .zs-price-wrapper,
  .zs-card-price-col .zs-price-wrapper {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }

  .zs-price-from,
  .zs-card-price-col .zs-price-from {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important; /* dunkle Farbe, kleiner als Preis */
    line-height: 1 !important;
    margin-right: 3px !important;
  }

  .zs-card-price-col .zs-price-amount {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--zs-primary, #047857) !important;
    line-height: 1.15 !important;
    display: inline-block !important;
    margin: 0 !important;
  }

  .zs-card-price-col .zs-price-unit {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    display: block !important;
    margin-top: 1px !important;
  }

  /* Alte Preis-Elemente neben dem Button oder im Accordion auf Mobile neutralisieren */
  .zs-card-nights-info,
  .room-info-box .zs-card-nights-info,
  .room-detail-box .zs-card-nights-info,
  .zs-card-action-row .zs-card-nights-info,
  .room-info-box .summary,
  .room-info-box .price_wrap,
  .room-info-box .room-price,
  .room-info-box .price-wrap,
  .room-detail-accordion .summary,
  .rate_plan .summary,
  .room-info-box [class*="price-label"],
  .room-info-box [class*="pro-nacht"],
  .room-detail-box .price,
  .room-detail-box .summary,
  .room-info-box .price-column,
  .room-info-box td:first-child:has(.summary) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4. Button "Tarife & Buchen" auf die volle Breite der Spalte wie das Bild bis an den Rahmen */
  .zs-card-action-row,
  .room-info-box .zs-card-action-row,
  .room-detail-box .zs-card-action-row,
  .room-info-box .bookr,
  .room-detail-box .bookr {
    order: 4 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-top: auto !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }

  .zs-card-cta-btn,
  .rateplan_submitBtn,
  .room-info-box .zs-card-cta-btn,
  .room-detail-box .zs-card-cta-btn,
  .room-info-box button.zs-card-cta-btn,
  .room-info-box button,
  .room-detail-accordion button,
  .rate_plan button,
  .rate_plan .bookr,
  .bookr,
  .bookr .rateplan_submitBtn,
  .room-info-box .rateplan_submitBtn,
  .room-info-box a.btn,
  .accordion-button.dropdown_arrow,
  button.dropdown_arrow {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 0 0 16px 16px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    background: var(--zs-primary, #047857) !important;
    color: #ffffff !important;
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
  }

  /* Zimmer-Karte auf Mobile: Ein einziger nahtloser Container */
  .room-info-box {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 14px !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
  }

  .room-info-box.zs-open-card {
    border-radius: 14px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  }

  /* Ratenplan-Auswahl auf Mobile: Im GLEICHEN Container nahtlos nach unten öffnen */
  .room-detail-accordion,
  .room-info-box .room-detail-accordion {
    background: #f8fafc !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    border-radius: 0 0 14px 14px !important;
    padding: 10px 8px 14px 8px !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .room-detail-accordion .accordion-item,
  .room-detail-accordion .room-detail-accordion-item,
  .room-detail-accordion .room-detail-accordion-body {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .zs-rates-section-title {
    display: none !important;
  }

  .ratestable {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .rate_plan {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    padding: 14px 14px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 2px solid #10b981 !important;
    min-height: auto !important;
    text-align: left !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  }

  .rate_plan:last-child {
    margin-bottom: 0 !important;
  }

  .rate_plan.zs-rate-breakfast {
    border: 2px solid #10b981 !important;
    background: #f0fdf4 !important;
  }

  .rate_plan .rate_name {
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .rate_plan .price,
  .rate_plan .finalr,
  .rate_plan .total_price,
  .rate_plan strong {
    font-size: 15px !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  .rate_plan .rateplan_submitBtn,
  .rate_plan button,
  .rate_plan input[type="submit"] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Auf Mobile: Den oberen Button ausblenden wenn die Raten geöffnet sind, und erst am Ende der Optionen den Button 'Tarife verbergen' anzeigen */
  .room-info-box.zs-open-card .zs-card-cta-btn {
    display: none !important;
  }

  .zs-close-rates-bottom-btn {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    background: #0f766e !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    border: none !important;
    margin-top: 10px !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: 40px !important;
  }

  .zs-mobile-rate-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .zs-rate-badge {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    line-height: 1.25 !important;
    display: inline-block !important;
  }

  .zs-rate-badge-only {
    background: #f1f5f9 !important;
    color: #334155 !important;
  }

  .zs-rate-badge-breakfast {
    background: #d1fae5 !important;
    color: #065f46 !important;
  }

  .zs-rate-guests,
  .zs-rate-meal {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  .zs-rate-guests {
    color: #475569 !important;
    font-weight: 600 !important;
  }

  .zs-rate-meal {
    font-weight: 700 !important;
  }

  .zs-rate-price-container {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid #f1f5f9 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }

  /* 10.4 GASTDATEN & CHECKOUT-FORMULAR AUF MOBILGERÄTEN (STRENG 1 FELD PRO ZEILE) */
  .fillDetails .formArea,
  .formArea,
  .fillDetails .formArea .row,
  .formArea .row,
  .customer-details,
  .customer-details .row {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    clear: both !important;
  }

  /* Extras-Header auf Mobilgeräten: Titel etwas kleiner & Badge "Optional zubuchbar" komplett entfernen */
  .zs-step25-header .zs-addons-section-badge,
  .zs-addons-section-badge {
    display: none !important;
  }

  .zs-step25-header .zs-addons-header-title,
  .zs-addons-header-title {
    font-size: 11px !important;
    gap: 4px !important;
  }

  /* Umschalter Art der Reise (Privat vs. Geschäft) oben im Formular auf Smartphones - 100% volle Breite */
  .zs-travel-type-wrapper {
    margin-top: 4px !important;
    margin-bottom: 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 10px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
  }

  .zs-travel-type-heading {
    margin-bottom: 8px !important;
    text-align: center !important;
  }

  .zs-travel-type-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    margin-bottom: 0px !important;
    color: #0f172a !important;
    text-align: center !important;
  }

  .zs-travel-type-sub {
    display: none !important;
  }

  .zs-travel-type-selector {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .zs-travel-type-btn {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    max-width: 50% !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
  }

  .zs-radio-icon {
    display: none !important;
  }

  .zs-btn-text {
    min-width: 0 !important;
    text-align: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  .zs-btn-text strong {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    display: block !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .zs-btn-text small {
    font-size: 9.5px !important;
    display: block !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* Mobil: Container für Eingabe der Daten (Privatreise/Geschäftsreise + Gastdaten) nutzt die gesamte Breite */
  .fillDetails .container,
  .main-body-wrapper .container,
  .container:has(.formArea),
  .container:has(.zs-travel-type-wrapper),
  .container:has(.customer-details),
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .fillDetails .col-md-8,
  .col-md-8,
  .fillDetails .formArea,
  .formArea,
  .customer-details,
  .customer_details,
  .customer-details .col-md-8,
  .col-md-8 .formArea,
  .col-md-8 .customer-details {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Riesige Abstände zwischen einzelnen Feldern auf Mobilgeräten eliminieren */
  .fillDetails .formArea .row,
  .formArea .row,
  .customer-details .row {
    display: block !important;
    gap: 0px !important;
    row-gap: 0px !important;
    margin-bottom: 0px !important;
  }

  .fillDetails .form-group,
  .main-body-wrapper .form-group,
  .formArea .form-group,
  .customer-details .form-group,
  .col-md-8 .form-group,
  .form-group {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
  }

  /* Streng 1 Feld pro Zeile für alle regulären Gastdaten-Felder auf Mobilgeräten */
  /* Abstände zwischen den Feldern kompakt & harmonisch (keine riesigen Lücken) */
  .fillDetails .formArea .col-md-6:not(.zs-company-field-col),
  .fillDetails .formArea .col-sm-6,
  .fillDetails .formArea .col-xs-6,
  .fillDetails .formArea .col-xs-12:not(.zs-company-divider-col):not(.zs-company-field-col),
  .formArea .col-md-6:not(.zs-company-field-col),
  .formArea .col-sm-6,
  .formArea .col-xs-6,
  .formArea .col-xs-12:not(.zs-company-divider-col):not(.zs-company-field-col),
  .formArea .col-md-12:not(.zs-travel-type-wrapper):not(.zs-company-divider-col):not(.zs-company-field-col):not(.m-t-23),
  .fillDetails .formArea .col-md-12:not(.zs-travel-type-wrapper):not(.zs-company-divider-col):not(.zs-company-field-col):not(.m-t-23),
  .customer-details .col-md-6:not(.zs-company-field-col),
  .customer-details .col-sm-6,
  .customer-details .col-xs-6,
  .customer-details .col-md-12:not(.zs-travel-type-wrapper):not(.zs-company-divider-col):not(.zs-company-field-col):not(.m-t-23),
  .col-md-8 .formArea .col-md-6:not(.zs-company-field-col),
  .col-md-8 .formArea .col-md-12:not(.zs-travel-type-wrapper):not(.zs-company-divider-col):not(.zs-company-field-col):not(.m-t-23),
  .col-md-8 .customer-details .col-md-6:not(.zs-company-field-col),
  .formArea .row > .col-md-6:not(.zs-company-field-col),
  .formArea .row > .col-md-12:not(.zs-travel-type-wrapper):not(.zs-company-divider-col):not(.zs-company-field-col):not(.m-t-23),
  .zs-message-col,
  .zs-street-col {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* WICHTIG: Firmen-Trennlinie & Firmen-Eingabefeld bei Privatreise STRENG AUSBLENDEN (display: none !important) */
  body:not(.zs-is-business) .zs-company-divider-col:not(.zs-visible),
  body:not(.zs-is-business) .zs-company-field-col:not(.zs-visible),
  .formArea:not(.zs-is-business) .zs-company-divider-col:not(.zs-visible),
  .formArea:not(.zs-is-business) .zs-company-field-col:not(.zs-visible),
  .row:not(.zs-is-business) .zs-company-divider-col:not(.zs-visible),
  .row:not(.zs-is-business) .zs-company-field-col:not(.zs-visible),
  .zs-company-divider-col:not(.zs-visible):not(.zs-is-business),
  .zs-company-field-col:not(.zs-visible):not(.zs-is-business) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  /* Nur bei Geschäftsreise (.zs-is-business oder .zs-visible) auf Mobilgeräten voll sichtbar schalten */
  body.zs-is-business .zs-company-divider-col,
  body.zs-is-business .zs-company-field-col,
  .zs-is-business .zs-company-divider-col,
  .zs-is-business .zs-company-field-col,
  .formArea.zs-is-business .zs-company-divider-col,
  .formArea.zs-is-business .zs-company-field-col,
  .fillDetails .zs-company-divider-col.zs-visible,
  .fillDetails .zs-company-field-col.zs-visible,
  .col-md-8 .zs-company-divider-col.zs-visible,
  .col-md-8 .zs-company-field-col.zs-visible,
  .formArea .zs-company-divider-col.zs-visible,
  .formArea .zs-company-field-col.zs-visible,
  .row .zs-company-divider-col.zs-visible,
  .row .zs-company-field-col.zs-visible,
  .fillDetails.zs-is-business .zs-company-divider-col,
  .fillDetails.zs-is-business .zs-company-field-col,
  .col-md-8.zs-is-business .zs-company-divider-col,
  .col-md-8.zs-is-business .zs-company-field-col,
  .zs-company-divider-col.zs-visible,
  .zs-company-field-col.zs-visible,
  div.zs-company-divider-col.zs-visible,
  div.zs-company-field-col.zs-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    clear: both !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    overflow: visible !important;
  }

  .zs-company-line {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background-color: #e2e8f0 !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .zs-company-section-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 6px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.4 !important;
  }

  .zs-company-field-col .form-group,
  .zs-company-field-col label,
  .zs-company-field-col input {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
  }

  .fillDetails input[type="text"],
  .fillDetails input[type="email"],
  .fillDetails input[type="tel"],
  .fillDetails select,
  .formArea input,
  .formArea select,
  .customer-details input,
  .customer-details select {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 38px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 6px 10px !important;
  }

  .formArea textarea,
  .fillDetails textarea,
  .customer-details textarea {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 60px !important;
    border-radius: 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
  }

  .formArea label,
  .fillDetails label,
  .customer-details label {
    display: block !important;
    visibility: visible !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
  }

  /* Checkbox & Datenschutz voll sichtbar & tippbar */
  .formArea .checkbox,
  .fillDetails .checkbox,
  .customer-details .checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    visibility: visible !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }

  .formArea .checkbox input[type="checkbox"],
  .fillDetails .checkbox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  .formArea .checkbox label,
  .fillDetails .checkbox label {
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    color: #475569 !important;
  }

  /* 2 Buttons nach dem Text "Hiermit bestätige ich, dass..." im Formular (Schritt 30) auf Mobilgeräten VOLLSTÄNDIG ENTFERNEN */
  /* WICHTIG: NIEMALS auf Schritt 25 (.tableWrap / Zusatzleistungen) anwenden! */
  .formArea .m-t-23,
  .fillDetails .formArea .m-t-23,
  .customer-details .m-t-23,
  .formArea .m-t-23 *,
  .fillDetails .formArea .m-t-23 *,
  .customer-details .m-t-23 *,
  .formArea .m-t-23 button,
  .formArea .m-t-23 .all_btn,
  .formArea .m-t-23 .submitBtn,
  .formArea .m-t-23 a.all_btn,
  .formArea .m-t-23 .back_btn,
  .formArea .m-t-23 a.back_btn,
  .customer-details .m-t-23 button,
  .customer-details .m-t-23 .submitBtn,
  .customer-details .m-t-23 .all_btn {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  .fillDetails .col-md-4,
  .fillDetails:not(:has(.room-info-box)) .col-md-4,
  .fillDetails:not(:has(.room-info-box)) .col-md-4:not(.room-info-box *),
  .fillDetails > .container > .row > .col-md-4,
  .fillDetails > .container > .col-md-4,
  .customer-details .col-md-4,
  .customer-details > .row > .col-md-4,
  .customer-details .col-md-4:not(.room-info-box *),
  .customer_details .col-md-4:not(.room-info-box *),
  .col-md-4 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
    right: auto !important;
    position: static !important;
    box-sizing: border-box !important;
    margin-top: 16px !important;
  }

  /* ==============================================================
     10.5 MOBIL-DESIGN FÜR SCHRITT 2: ZUSATZLEISTUNGEN & ARTIKEL
     (Beide Container exakt gleiche Breite & perfekt zentriert)
     ============================================================== */
  .fillDetails .container,
  .fillDetails > .container,
  section.fillDetails > .container,
  .main-body-wrapper .container,
  .main-body-wrapper > .container,
  .customer-details .container,
  .booking-wrapper .container,
  .container:has(.col-md-8),
  .container:has(.bookDtlsArea) {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Alle Zeilen / Rows auf Mobilgeräten zentriert und ohne negatives Margin */
  .fillDetails .row,
  .fillDetails > .container > .row,
  section.fillDetails > .container > .row,
  .fillDetails:not(:has(.room-info-box)) > .container > .row,
  .fillDetails:not(:has(.room-info-box)) > .row,
  .main-body-wrapper .row,
  .main-body-wrapper > .container > .row,
  .customer-details .row,
  .booking-wrapper .row,
  .container > .row,
  .container-fluid > .row,
  .row:has(> .col-md-8),
  .row:has(> .col-md-4),
  .row:has(.bookDtlsArea),
  .row:has(.tableWrap) {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  /* Oberer Container: Auswahl der Extras (Perfekt zentriert & volle mobile Breite) */
  .col-md-8:has(.tableWrap),
  .col-md-8:has(.zs-step25-header),
  .col-md-8:has(.zs-addons-section),
  .col-md-8:has(.zs-addon-groups-container),
  .fillDetails .col-md-8:has(.tableWrap),
  .main-body-wrapper .col-md-8:has(.tableWrap),
  .fillDetails .col-md-8,
  .fillDetails:not(:has(.room-info-box)) .col-md-8,
  .fillDetails:not(:has(.room-info-box)) .col-md-8:not(.room-info-box *):not(.formArea *),
  .fillDetails > .container > .row > .col-md-8:not(.room-info-box *),
  .main-body-wrapper .col-md-8,
  .customer-details .col-md-8,
  .customer_details .col-md-8,
  .col-md-8 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    order: 1 !important;
    padding: 16px 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    float: none !important;
    clear: both !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: var(--zs-radius, 16px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    display: block !important;
  }

  /* Native Zimmersoftware-Artikelkarten auf dem Smartphone */
  .fillDetails .dFlex.tableWrap,
  .tableWrap.dFlex,
  .tableWrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .fillDetails .dFlex.tableWrap:active,
  .tableWrap:active {
    border-color: var(--zs-primary) !important;
  }

  .tableWrap .showxs,
  .tableWrap .full.showxs {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .tableWrap .hotContent,
  .tableWrap .hotContent.norates,
  .tableWrap .hotContent.norates.dblock {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 2px !important;
  }

  .tableWrap .hotContent h4,
  .tableWrap h4 {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    flex: 1 1 auto !important;
  }

  .tableWrap .finalr {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: var(--zs-primary) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 3px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    line-height: 1.2 !important;
  }

  .tableWrap .finalr .rebate {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .tableWrap .finalr .rebate input {
    width: 44px !important;
    height: 30px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: center !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    padding: 2px !important;
  }

  .tableWrap .roomDesc,
  .tableWrap .roomDesc p {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin: 4px 0 0 0 !important;
    display: block !important;
  }

  /* Button "Hinzufügen" volle Touch-Breite */
  .tableWrap .ratePart.fillprice,
  .tableWrap .ratePart,
  /* Zusatzleistungen: Button "Zubuchen / Hinzufügen" immer voll sichtbar, groß & touchfreundlich */
  .tableWrap .ratePart.fillprice,
  .tableWrap .ratePart,
  .tableWrap .ratestable,
  .fillDetails .tableWrap .ratePart,
  .fillDetails .tableWrap .ratestable {
    width: 100% !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
  }

  .tableWrap button,
  .tableWrap input[type="submit"],
  .tableWrap input[type="button"],
  .tableWrap button[name="additem"],
  .tableWrap button[name*="item"],
  .tableWrap .submitBtn,
  .tableWrap .all_btn,
  .tableWrap .ratePart button,
  .tableWrap .ratePart .submitBtn,
  .fillDetails .tableWrap button,
  .fillDetails .tableWrap .submitBtn,
  .fillDetails .tableWrap input[type="submit"] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    background: var(--zs-primary, #047857) !important;
    color: #ffffff !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(var(--zs-primary-rgb, 4, 120, 87), 0.3) !important;
    cursor: pointer !important;
    margin: 4px 0 0 0 !important;
    pointer-events: auto !important;
  }

  /* Button-Feedback beim Tippen */
  .tableWrap button:active,
  .tableWrap input[type="submit"]:active,
  .tableWrap .submitBtn:active {
    transform: scale(0.98) !important;
    opacity: 0.9 !important;
  }

  /* Stornieren / Entfernen falls bereits gebucht */
  .tableWrap button[name="deleteitem"],
  .tableWrap button[name="delitem"],
  .tableWrap button[name="removeitem"],
  .tableWrap button[name*="del"] {
    background: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
  }

  /* Ausgewählte Artikelkarte auf Mobilgeräten */
  .tableWrap.zs-extra-selected,
  .tableWrap:has(.zs-card-cancel-cross) {
    background: #f0fdf4 !important;
    border-color: var(--zs-primary) !important;
  }

  /* Buchungszusammenfassung & Weiter-Button auf Mobilgeräten */
  /* Buchungszusammenfassung & Weiter-Button auf Mobilgeräten */
  /* ==============================================================
     UNTERER CONTAINER: Zusammenfassung der Buchung
     (Exakt gleiche Breite wie oberer Container & perfekt zentriert)
     ============================================================== */
  .col-md-4:has(.bookDtlsArea),
  .col-md-4:has(.left-side-box),
  .fillDetails .col-md-4,
  .fillDetails:not(:has(.room-info-box)) .col-md-4,
  .fillDetails:not(:has(.room-info-box)) .col-md-4:not(.room-info-box *),
  .fillDetails > .container > .row > .col-md-4,
  .main-body-wrapper .col-md-4,
  .customer-details .col-md-4,
  .customer_details .col-md-4,
  .col-md-4 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: 2 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    float: none !important;
    clear: both !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  .fillDetails .bookDtlsArea,
  .fillDetails .left-side-box,
  .main-body-wrapper .bookDtlsArea,
  .main-body-wrapper .left-side-box,
  .bookDtlsArea.left-side-box,
  .bookDtlsArea,
  .left-side-box {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: var(--zs-radius, 16px) !important;
    padding: 16px 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  .fillDetails .bookDtlsArea .bookDtlsTitle h4,
  .bookDtlsArea .bookDtlsTitle h4,
  .bookDtlsTitle h4 {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    display: block !important;
  }

  .fillDetails .bookDtlsArea .bookDtlsTitle h4::before,
  .bookDtlsArea .bookDtlsTitle h4::before,
  .bookDtlsTitle h4::before {
    content: none !important;
    display: none !important;
  }

  .fillDetails .bookDtlsArea .detail_list {
    margin-bottom: 12px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .fillDetails .bookDtlsArea .detail_list li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 12px !important;
  }

  .fillDetails .bookDtlsArea .totalPrice h4 {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--zs-primary) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-top: 2px solid #e2e8f0 !important;
    margin-top: 10px !important;
  }

  .fillDetails .bookDtlsArea button[name="nextstep"],
  .fillDetails .bookDtlsArea .submitBtn {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    background: var(--zs-primary) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(var(--zs-primary-rgb), 0.35) !important;
    cursor: pointer !important;
    margin-top: 14px !important;
  }

  /* Mobile Extras Akkordeons & Karten wenn JS aktiv */
  .zs-addons-section-header.zs-step25-header {
    margin-bottom: 10px !important;
  }

  .zs-addon-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  /* --- 10.9 SCHRITT 40: BUCHUNGSBESTÄTIGUNG AUF SMARTPHONES (Rahmen & Layout 100% schützen, Daten & Termine perfekt sichtbar) --- */
  .bookingConfoArea,
  .yourBooking,
  .confirmationArea,
  .confirmArea,
  .printArea,
  .confirmation-box,
  .fillDetails:has(table),
  .main-body-wrapper:has(table),
  div:has(> .bookingConfo) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
    float: none !important;
    clear: both !important;
  }

  .bookingConfoArea .container,
  .bookingConfoArea .container-fluid,
  .yourBooking .container,
  .confirmationArea .container,
  .confirmArea .container,
  .fillDetails .container:has(table),
  .main-body-wrapper .container:has(table) {
    padding-left: 8px !important;
    padding-right: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }

  .bookingConfoArea .row,
  .yourBooking .row,
  .confirmationArea .row,
  .confirmArea .row,
  .fillDetails .row:has(table),
  .main-body-wrapper .row:has(table) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
  }

  /* Kolumnen auf Mobile: Absolut KEIN Rahmen / Hintergrund, damit KEIN doppelter Rahmen entsteht */
  .bookingConfoArea .col-md-8,
  .bookingConfoArea .col-md-4,
  .yourBooking .col-md-8,
  .yourBooking .col-md-4,
  .confirmationArea .col-md-8,
  .confirmationArea .col-md-4,
  .confirmArea .col-md-8,
  .confirmArea .col-md-4 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* Der Drucken-Balken oben auf Smartphones */
  .printArea,
  .dTable.printArea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
    margin: 0 0 12px 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: var(--zs-radius-sm, 12px) !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    gap: 8px !important;
    float: none !important;
    clear: both !important;
  }

  .printCon {
    width: auto !important;
    max-width: 65% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    font-size: 13px !important;
    float: none !important;
    display: block !important;
    margin-bottom: 0 !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
  }

  .printCon h5 {
    font-size: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .printCon h5::after {
    display: none !important;
  }

  .printBtn {
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }

  .printBtn a,
  .printBtn .all_btn,
  .fa-print,
  a[onclick*="print"],
  .print-icon {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .printBtn a img {
    width: 14px !important;
    margin-left: 4px !important;
  }

  /* Die EINZIGE weiße Bestätigungskarte (Haupt-Box) - KEIN doppelter Rahmen */
  .bookingConfo,
  .confirmation-box,
  .fillDetails .col-md-8:not(:has(.bookingConfo)):has(table),
  .main-body-wrapper .col-md-8:not(:has(.bookingConfo)):has(table) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px 14px !important;
    margin: 0 auto 14px auto !important;
    border-radius: var(--zs-radius-sm, 14px) !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    float: none !important;
    clear: both !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  }

  /* Titel "Buchungsbestätigung" auf Mobile */
  .bookingConfo h3,
  .bookingConfo h2,
  .bookingConfoArea h3,
  .bookingConfoArea h2,
  .confirmationArea h2,
  .confirmationArea h3,
  .confirmationArea h4,
  .confirmArea h2,
  .confirmArea h3,
  .fillDetails h2:has(+ table),
  .main-body-wrapper h2:has(+ table),
  .fillDetails .col-md-8:has(table) h2,
  .fillDetails .col-md-8:has(table) h3,
  .main-body-wrapper .col-md-8:has(table) h2,
  .main-body-wrapper .col-md-8:has(table) h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    width: 100% !important;
    line-height: 1.3 !important;
    color: #0f172a !important;
  }

  /* ==============================================================
     ZUSAMMENFASSUNG DER BUCHUNG (Schritt 25 & 30): Detail-Liste, Extras & Zimmer
     ============================================================== */
  ul.detail_list,
  .bookDtlsArea ul.detail_list,
  .left-side-box ul.detail_list,
  .fillDetails .bookDtlsArea .detail_list {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  ul.detail_list li,
  .bookDtlsArea ul.detail_list li,
  .left-side-box ul.detail_list li,
  .fillDetails .bookDtlsArea .detail_list li {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    box-sizing: border-box !important;
    gap: 12px !important;
    float: none !important;
    clear: both !important;
  }

  ul.detail_list li .detail_list_headline,
  .bookDtlsArea ul.detail_list li .detail_list_headline {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    float: none !important;
    text-align: left !important;
  }

  ul.detail_list li .val,
  ul.detail_list li .detail_list_person_count,
  .bookDtlsArea ul.detail_list li .val {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: right !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    float: none !important;
  }

  /* Anzahl Personen: Wort "Personen" (.detail_list_attributes) komplett verbergen */
  .detail_list_attributes,
  .bookDtlsArea .detail_list_attributes,
  p.detail_list_attributes {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .bookDtlsArea .result-booking-customers,
  .detail_list .result-booking-customers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    text-align: right !important;
  }

  /* Zimmer-Überschrift & Tarif-Card in Zusammenfassung der Buchung */
  .bookDtlsArea h4:not(.noPadding):not(.bookDtlsTitle *):not(.bookDtlsTitle),
  .left-side-box h4:not(.noPadding):not(.bookDtlsTitle *):not(.bookDtlsTitle) {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 14px 0 8px 0 !important;
    line-height: 1.3 !important;
  }

  .bookDtlsArea ul.room-list,
  .bookDtlsArea ul.comfort-room-list,
  .left-side-box ul.room-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .bookDtlsArea ul.room-list li,
  .bookDtlsArea ul.comfort-room-list li,
  .left-side-box ul.room-list li {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #f8fafc !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .bookDtlsArea ul.room-list .room-price,
  .left-side-box ul.room-list .room-price {
    font-weight: 800 !important;
    color: var(--zs-primary) !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }

  /* Extras & Storno-Box in Zusammenfassung der Buchung (.bookDtlsArea ul.full) als hochwertige Grünkarten */
  .bookDtlsArea.left-side-box ul.full,
  .bookDtlsArea ul.full,
  .left-side-box ul.full,
  .fillDetails .bookDtlsArea ul.full {
    list-style: none !important;
    padding: 8px 12px !important;
    margin: 6px 0 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bookDtlsArea.left-side-box ul.full li.info,
  .bookDtlsArea ul.full li.info,
  .left-side-box ul.full li.info,
  .fillDetails .bookDtlsArea ul.full li.info {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #166534 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    flex: 1 1 auto !important;
    text-align: left !important;
  }

  .bookDtlsArea.left-side-box ul.full li.val,
  .bookDtlsArea ul.full li.val,
  .left-side-box ul.full li.val,
  .fillDetails .bookDtlsArea ul.full li.val {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #166534 !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* Gesamtpreis in der Zusammenfassung */
  .bookDtlsArea .totalPrice,
  .left-side-box .totalPrice {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 2px solid #e2e8f0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .bookDtlsArea .totalPrice h4,
  .left-side-box .totalPrice h4 {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .bookDtlsArea .totalPrice span.pull-right,
  .left-side-box .totalPrice span.pull-right {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--zs-primary) !important;
    float: none !important;
  }

  /* ==============================================================
     ZIMMERSOFTWARE SCHRITT 40: BUCHUNGSBESTÄTIGUNG AUF MOBILGERÄTEN
     Jedes ul ist genau 1 Zeile mit info (Label) & val (Wert), perfekt lesbar
     ============================================================== */
  .bookingConfo ul,
  .bookingCond,
  ul.bookingCond,
  .bookingConfoArea ul,
  .confirmationArea ul,
  .confirmArea ul,
  .yourBooking ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    list-style: none !important;
    gap: 10px !important;
  }

  /* Linke Spalte (Beschriftung / Label in Schritt 40): Passt sich flexibel an, bricht sanft um */
  .bookingConfo ul:not(.zs-zimmer-row):not([data-field="zimmer"]) li.info,
  .bookingCond:not(.zs-zimmer-row) li.info,
  ul.bookingCond:not(.zs-zimmer-row) li.info,
  .confirmationArea ul li.info,
  .confirmArea ul li.info {
    width: auto !important;
    max-width: 48% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    float: none !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    hyphens: auto !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Rechte Spalte (Daten & Werte in Schritt 40): DEUTLICH, KRÄFTIG & 100% VOLLSTÄNDIG SICHTBAR */
  .bookingConfo ul:not(.zs-zimmer-row):not([data-field="zimmer"]) li.val,
  .bookingCond:not(.zs-zimmer-row) li.val,
  ul.bookingCond:not(.zs-zimmer-row) li.val,
  .confirmationArea ul li.val,
  .confirmArea ul li.val {
    width: auto !important;
    max-width: 60% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    float: none !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
  }

  /* ZIMMERNAME AUF MOBILE: Verkleinert und direkt UNTER das Label "ZIMMER" gesetzt (100% volle Breite, nie gequetscht) */
  .bookingConfo ul.zs-zimmer-row,
  .bookingConfo ul[data-field="zimmer"],
  .bookingCond.zs-zimmer-row,
  ul.bookingCond.zs-zimmer-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    padding: 8px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .bookingConfo ul.zs-zimmer-row li.info,
  .bookingConfo ul[data-field="zimmer"] li.info,
  .bookingCond.zs-zimmer-row li.info,
  ul.bookingCond.zs-zimmer-row li.info {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-align: left !important;
    white-space: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .bookingConfo ul.zs-zimmer-row li.val,
  .bookingConfo ul[data-field="zimmer"] li.val,
  .bookingCond.zs-zimmer-row li.val,
  ul.bookingCond.zs-zimmer-row li.val {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Tabellen-Layout der Bestätigung: table-layout auto, linke Spalte schrumpft auf Text, rechte Spalte füllt Rest */
  .bookingConfo table,
  .bookingConfoArea table,
  .confirmationArea table,
  .confirmArea table,
  .fillDetails table,
  .main-body-wrapper table,
  .confirm-table,
  .summaryTable,
  .table:has(td) {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    margin: 8px 0 14px 0 !important;
    box-sizing: border-box !important;
  }

  .bookingConfo table tr,
  .bookingConfoArea table tr,
  .confirmationArea table tr,
  .confirmArea table tr,
  .fillDetails table tr,
  .main-body-wrapper table tr {
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .bookingConfo table td,
  .bookingConfoArea table td,
  .confirmationArea table td,
  .confirmArea table td,
  .fillDetails table td,
  .main-body-wrapper table td {
    padding: 6px 4px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
  }

  /* Linke Spalte (Beschriftung / Label in Tabelle) */
  .bookingConfo table td:first-child,
  .bookingConfoArea table td:first-child,
  .confirmationArea table td:first-child,
  .confirmArea table td:first-child,
  .fillDetails table td:first-child,
  .main-body-wrapper table td:first-child {
    width: 44% !important;
    white-space: normal !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    word-break: break-word !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  /* Rechte Spalte (Daten & Werte in Tabelle): Nimmt den Platz ein, NIE gequetscht, 100% sichtbar */
  .bookingConfo table td:last-child,
  .bookingConfoArea table td:last-child,
  .confirmationArea table td:last-child,
  .confirmArea table td:last-child,
  .fillDetails table td:last-child,
  .main-body-wrapper table td:last-child {
    width: 56% !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: right !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    padding-left: 8px !important;
    box-sizing: border-box !important;
  }

  /* Zimmer-Zeile in Tabelle auf Mobile untereinander */
  .bookingConfo table tr.zs-zimmer-row,
  .bookingConfo table tr[data-field="zimmer"],
  .bookingConfoArea table tr.zs-zimmer-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 6px 0 !important;
  }

  .bookingConfo table tr.zs-zimmer-row td:first-child,
  .bookingConfo table tr[data-field="zimmer"] td:first-child,
  .bookingConfoArea table tr.zs-zimmer-row td:first-child {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-align: left !important;
    padding: 0 0 2px 0 !important;
  }

  .bookingConfo table tr.zs-zimmer-row td:last-child,
  .bookingConfo table tr[data-field="zimmer"] td:last-child,
  .bookingConfoArea table tr.zs-zimmer-row td:last-child {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 11.5px !important;
    text-align: left !important;
    padding: 0 !important;
  }

  /* Preise & Summen auf Mobile */
  .bookingConfo [style*="color: #c59b27"],
  .bookingConfo [style*="color:#c59b27"],
  .bookingConfo [style*="color: rgb(197, 155, 39)"],
  .confirmationArea [style*="color: #c59b27"],
  .confirmationArea [style*="color:#c59b27"],
  .confirmationArea [style*="color: rgb(197, 155, 39)"],
  .confirmArea [style*="color: #c59b27"],
  .confirmArea [style*="color:#c59b27"],
  .confirmArea [style*="color: rgb(197, 155, 39)"],
  .fillDetails [style*="color: #c59b27"],
  .fillDetails [style*="color:#c59b27"],
  .fillDetails [style*="color: rgb(197, 155, 39)"],
  .main-body-wrapper [style*="color: #c59b27"],
  .main-body-wrapper [style*="color:#c59b27"],
  .main-body-wrapper [style*="color: rgb(197, 155, 39)"],
  .finalPrice,
  .totalPrice,
  .grandSumme {
    font-size: 16px !important;
  }

  /* Rechter Kontakt-Kasten auf Mobilgeräten */
  .hotelInf,
  .contact-card-box,
  .bookingConfoArea .col-md-4:not(:has(.hotelInf)),
  .confirmationArea .col-md-4 > div,
  .confirmArea .col-md-4 > div {
    padding: 14px 12px !important;
    border-radius: var(--zs-radius-sm, 14px) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    margin-top: 8px !important;
  }

  .hotelInf h5,
  .bookingConfoArea .col-md-4 h4 {
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    color: #0f172a !important;
  }

  .hotelInf h5::after {
    display: none !important;
  }
}

.zs-close-rates-bottom-btn {
  display: none !important;
}